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内 容 提 要 


本 书 详细 介绍 讲述 了 JavaScript 的 基础 知识 以 及 一 些 现代 语言 工具 和 库 ， 例 如 jQuery、Underscore.js 
和 Jasmine。 主 要 内 容 包括 : JavaScript 基础 知识 ， 函 数 、 闭 包 和 模块 ， 数 据 结构 和 相关 处 理 ， 面 向 对 象 的 
JavaScript，JavaScript 设计 模式 ， 测 试 与 调试 ，ECMAScript 6，DOM 事件 和 操作 ， 服 务 器 端 JavaScript。 

本 书 适 合 所 有 JavaScript 开发 人 员 阅 读 。 
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看 起 来 ， 与 JavaScript 有 关 的 内 容 该 写 的 都 已 经 写 过 了 。 坦 白 说 ， 很 难 找 出 JavaScript 中 还 有 
什么 没 被 人 翻来覆去 讨论 过 的 话题 。 但 是 ，JavaScript 的 发 展 速度 太 快 了 。ECMAScript 6 有 可 能 
会 给 这 门 语言 以 及 编码 方式 带 来 巨大 的 转变 。Node.js 已 经 改变 了 我 们 使 用 JavaScript 编 写 服务 器 
的 方法 ， 而 像 React 和 Flux 这 些 新 理念 将 会 推动 JavaScript 的 再 次 迭代 。 我 们 在 学 习 这 些 新 特性 的 
同时 , 不 应 该 忽略 那些 必须 掌握 的 JavaScript 基 础 知识 。 这 些 知 识 是 根基 , 不 容 忽 视 。 如 果 你 已 经 
是 一 位 JavaScript 的 开发 老手 ， 会 意识 到 现代 JavaScript 已 经 与 大 多 数 人 记忆 中 的 它 大 相 径 庭 了 。 
现代 JavaScript 不 但 要 求 遵 循 特定 的 编码 风格 以 及 严格 的 设计 思路 ， 而 且 编 程 工具 的 功能 愈 发 强 
大 , 已 经 逐渐 成 为 了 开发 流程 中 不 可 或 缺 的 组 成 部 分 。 尽 管 JavaScript 在 不 断 改 变 , 但 它 是 根植 于 
一 些 非常 坚实 、 稳 定 的 概念 之 上 的 。 本 书 强调 的 正 是 这 些 基本 概念 。 


在 本 书写 作 之 时 ,JavaScript 的 变化 仍 未 停 欢 。 和 幸运 的 是 , 所 有 重要 的 相关 更 新 都 已 经 包括 在 
了 本 书 中 。 
本 书 为 你 详细 讲述 了 JavaScript 的 基础 知识 ， 以 及 一 些 现代 的 语言 工具 和 库 ， 例 如 jQuery、 


Underscore.js 和 Jasmine。 


希望 你 能 够 享受 阅读 本 书 的 过 程 ， 就 像 我 们 享受 写作 本 书 的 过 程 一 样 。 












































































































































内 容 简介 


第 1 章 ，JavaScript 入 门 。 本 章 的 重点 在 于 语言 构件 ( language construct )， 在 基本 细节 方面 
不 会 花费 过 多 篇 幅 。 本 章 将 讲述 变量 作用 域 和 循环 中 不 太 容 易 掌握 的 地 方 , 以 及 类 型 和 数据 结构 
的 最 佳 使 用 实践 。 另 外 ， 还 包括 一 些 编码 风格 的 相关 知识 ， 以 及 推荐 的 代码 组 织 模式 。 

第 2 章 ， 函 数 、 闭 包 与 模块 。 本 章 将 讲述 JavaScript 语 言 错综复杂 的 核心 ， 探 讨 在 JavaScript 
中 , 因 闭 包 的 不 同 用 法 而 造成 的 复杂 性 。 本 章 细致 详尽 的 讨论 将 为 你 今后 深入 学 习 更 高 级 的 设计 
模式 奠定 基础 。 

第 3 章 ， 数 据 结构 及 相关 操作 。 本 章 将 详细 讲述 正则 表达 式 和 数组 。 数 组 是 JavaScript 的 基本 
数据 类 型 ， 本章 将 帮助 你 学 会 有 效 地 使 用 数组 。 正 则 表达 式 能 够 使 代码 更 简洁 ,我 们 将 仔细 讲解 
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如 何 充分 发 挥 出 正则 表达 式 的 功能 。 


第 4 章 ， 面 向 对 象 的 JavaScript。 本 章 将 讲述 JavaScript 中 的 面向 对 象 编 程 ， 包 括 继承 和 原型 ， 
重点 将 放 在 理解 JavaScript 的 原型 继承 模型 上 。 另 外 , 还 将 讨论 该 模型 与 其 他 面向 对 象 模型 之 间 的 
差异 ， 以 帮助 Java 或 C++ 程序 员 熟 悉 这 种 变化 。 


第 5 章 ，JavaScript 模 式 。 本 章 将 论述 常见 的 设计 模式 以 及 如 何在 JavaScript 中 实现 这 些 模式 。 
一 旦 你 掌握 了 JavaScript 的 面向 对 象 模型 , 就 更 容易 理解 设计 和 编程 模式 , 从 而 写 出 易于 维护 的 模 
块 化 代码 。 
第 6 章 ， 测 试 与 调试 。 本 章 将 讲述 各 种 现代 化 的 测试 方法 以 及 JavaScript 的 调试 问题 。 另 外 ， 
还 将 探究 JavaScript 的 持续 测试 和 测试 驱动 方法 。 本 章 中 将 采用 Jasmine 作 为 测试 框架 。 
第 7 章 ，ECMAScript 6。 本 章 将 重点 放 在 ECMAScript 6 (ES6 ) 所 引入 的 新 语言 特性 上 。 它 
们 使 得 JavaScript 的 功能 更 加 强大 ， 本 章 将 帮助 你 理解 并 使 用 这 些 新 特性 。 
第 8 章 ，DOM 操 作 与 事件 。 本 章 将 JavaScript 作 为 一 种 浏览 器 语言 进行 了 详尽 的 描述 , 讨论 了 
DOM 操 作 以 及 浏览 器 事件 。 

第 9 章 ， 服 务 器 端 JavaScript。 本 章 将 讲解 如 何 使 用 Node.js 编 写 可 伸缩 的 服务 器 系统 ， 探 讨 
Node.js 的 架构 和 一 些 实用 技术 。 





























阅读 前 提 





本 书 中 所 有 的 示例 都 可 以 运行 在 任何 现代 浏览 器 中 。 学 习 最 后 一 章 时 ， 你 需要 安装 Nodejs。 
运行 书 中 的 示例 需要 满足 以 下 前 提 条 件 。 


口 一 台 安装 了 Windows 7 ( 或 更 高 版 本 )、Linux 或 Mac OS X 操 作 系统 的 计算 机 。 
口 最 新 版 的 Google Chrome 或 Mozilla Firefox 浏 览 兢 。 
口 选择 一 款 文本 编辑 器 。Sublime Text、vi、Atom 或 者 Notepad++ 都 挺 不 错 。 选择 权 完 全 在 你 。 























目标 读者 
本 书 旨 在 教授 精通 JavaScript 必 须 掌 握 的 基础 知识 ， 适 合 以 下 读者 。 


口 具备 其 他 面向 对 象 语言 经 验 的 开发 人 员 。 书 中 的 内 够 帮助 他 们 利用 已 有 的 经 验 转换 
到 JavaScript。 
口 比较 熟悉 JavaScript 的 Web 开 发 人 员 。 本 书 将 帮助 他 们 学 习 JavaScript 的 高 级 概念 ， 改 
们 的 编程 风格 。 
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口 希望 了 解 并 最 终 成 为 JlavaScript 高 手 的 初学 者 。 本 书包 含 了 必 不 可 少 的 入 门 内 容 。 


排版 约定 
在 本 书 中 ， 你 会 发 现 针对 不 同 信息 类 型 的 文本 样式 。 下 面 是 这 些 样式 的 示例 和 解释 。 


正文 中 的 代码 、 数 据 库 表 名 、 用 户 输 入 的 样式 如 下 :“ 第 一 种 方式 是 通过 <head> 中 的 
<script> 标 签 导 入 JavaScript， 第 二 种 方式 是 利用 <script> 标 签 航 人 内 联 JavaScript。 


代码 块 的 版 式 如 下 : 


function sayHello(what) { 
return "Hello " + what; 


} 


console.log(sayHello ("world")); 
当 需 要 读者 特别 注意 代码 块 中 的 某 一 部 分 时 ， 相 关 的 代码 行 和 项 将 以 粗 体 显示 : 


<head> 
<script type="text/javascript" src="script.js"></script> 
<script type="text/javascript"> 
Var x = "Hello World"; 
console.1log (x); 
</script> 
</head> 


命令 行 输 入 或 输出 形式 如 下 : 


EN-VedA:~$ node 

> 0.1+0.2 
0.30000000000000004 
> (0.1+0.2)===0.3 
false 


新 术语 或 重要 词汇 会 以 黑体 显示 。 


此 图 标 表示 警告 或 重要 的 注意 事项 。 












































Q 此 图 标 表示 提示 和 技巧 。 
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读者 反馈 








欢迎 读者 反馈 意见 。 我 们 想 知道 读者 对 于 本 书 的 看 法 一 一 喜欢 哪些 内 容 或 不 喜欢 哪些 内 容 。 


读者 反馈 对 于 我 们 出 版 读者 真正 需要 的 图 书 至 关 重 要 。 


如 有 反馈 意见 , 请 将 电子 邮件 发 送 到 feedback@packtpub.com, 不 要 忘记 在 邮件 标题 中 注 明 你 


2 和 二 


要 反馈 的 书 名 。 


客户 支持 


现在 你 已 经 成 为 Packt 图 书 的 主人 了 ， 为 了 使 此 书 尽 可 能 物 有 所 值 ， 我 们 还 提供 


下 载 示 例 代码 








了 其 他 服务 。 


你 可 以 用 你 的 账户 从 http:Wwww.packtpub.com 中 下 载 所 购买 的 所 有 Packt 图 书 的 示例 代码 。 如 
果 你 是 从 其 他 地 方 购买 的 本 书 (英文 版 ) 可 以 访问 http:/www.packtpub.com/support 并 注册 ,以 便 





通过 电子 邮件 取得 示例 代码 。 











下 载 彩色 图 片 


我 们 为 你 提供 了 一 份 PDF 文 件 ， 其 中 包含 了 书 中 出 现 的 所 有 截屏 和 








图 示 的 彩色 图 片 。 这 些 彩 


色 图 片 有 助 于 你 更 好 地 理解 输出 内 容 的 变化 。 你 可 以 从 这 里 下 载 到 该 文件 : https:/www.packtpub. 


com/sites/default/files/downloads/MasteringJavaScript ColorImages.pdf。 


勘误 


尽管 我 们 已 竭尽 全 力 确保 本 书 内 容 的 准确 怕 








,但 错误 终 难 避免 .如 果 你 发 现 了 书 中 的 错误 ( 不 


管 是 文字 错误 还 是 代码 错误 ) 并 愿意 告知 我 们 ,我 们 将 非常 感激 。 这 样 不 仅 可 以 减少 其 他 读者 的 
疑惑 ， 也 有 助 于 本 书后 续 版 本 的 改进 。 要 提交 所 发 现 的 错误 ， 请 访问 http:/www.packtpub.comy 
submit-errata ， 选 择 书 名 ， 点 击 Errata Submission Form ( 勘误 提交 表单 ) 链接 ， 输 入 详细 的 错误 信 











息 。 一旦 勘误 得 





到 核实 ， 我 们 将 接受 你 的 提交 ， 同 时 勘误 内 容 也 会 被 上 传 到 我 们 的 网 站 ， 或 
添加 到 对 应 书目 勘误 区 的 现 有 勘误 表 中 。 





三 





人 碟 


要 想 查 看 之 前 提交 的 勘误 ,进入 https:/www.packtpub.com/books/content/support， 在 搜索 框 中 





Q@ 本 书 中 文 版 勘误 可 到 www.ituring.com.cn/book/2069 查 看 和 提交 。 一 一 编者 注 
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输入 书 名 即 可 。 你 所 需 的 信息 会 出 现在 Errata ( 勘误 ) 下 方 。 


举报 盗版 


各 类 媒体 在 网 络 上 一 直 饱 受 版 权 侵害 的 困扰 。Packt 坚 持 不 懈 地 严格 保护 版 权 和 授权 。 如 果 
你 在 网 上 发 现 了 我 社 图 书 的 任何 形式 的 盗版 , 请 立即 为 我 们 提供 地 址 或 网 站 名 称 , 以 便 我 们 采取 


措施 。 
请 将 疑似 侵权 的 网 站 链接 发 送 至 copyright@packpub.com。 
衷心 感谢 你 为 保护 作者 的 知识 产权 以 及 我 们 的 劳动 成 果 所 做 的 工作 。 














疑难 解答 


如 果 你 对 本 书 的 任何 方面 有 疑问 ， 请 通过 questions@packtpub.com 联 系 我 们 ， 我 们 将 尽力 为 
你 解决 。 




















电子 书 
扫描 如 下 二 维 码 ， 即 可 购买 本 书 电子 版 。 
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JavaScript 入 门 








万 事 开 篇 难 ， 尤 其 是 对 于 像 JavaScript 这 种 主题 。 为 难 之 处 主要 在 于 这 门 语言 已 经 被 讨论 过 
太 多 了 。JavaScript 已 经 成 为 Web 世 界 的 语言 一 一 在 Netscape Navigator 出 现 之 初 ， 它 就 作为 一 种 
通用 语言 存在 了 。 从 业余 爱好 者 的 一 件 工具 摇 身 变 为 行家 手中 的 利器 ，JavaScript 发 展 之 快 令 人 
贞 目 结 舌 。 


JavaScript 是 Web 上 最 流行 的 语言 和 开源 生态 环境 。http://githut.info/ 跟 踪 记 录 了 这 门 语言 过 去 
几 年 中 在 GitHub 上 活跃 仓库 的 数量 以 及 整体 受 欢 迎 程度 。JavaScript 如 此 流行 且 重 要 , 归功 于 它 同 
浏览 需 的 紧密 结合 。 作 为 经 过 极度 优化 的 JavaScript 引 擎 ，Google 的 V8 和 Mozilla 的 SpiderMonkey 
分 别 为 Google Chrome 和 Mozilla Firefox 浏 览 器 的 壮大 贡献 了 一 辟 之 力 。 
































尽管 Web 浏 览 器 是 JavaScript 应 用 最 广泛 的 平台 ,但 如 今 像 MongoDB 和 CouchDB 这 类 现代 数 
据 库 ， 也 开始 使 用 JavaScript 作 为 其 脚本 和 查询 语言 。JavaScript 已 经 成 为 浏览 器 之 外 的 一 个 重要 
平台 ,例如 , Node.js 和 io.js 项 目 就 为 使 用 JavaScript 开 发 可 伸缩 的 服务 器 环境 提供 了 强 有 力 的 平台 ; 
另外 一 些 引 入 注目 的 项 目 更 是 将 这 门 语言 的 性 能 推 向 了 极限 ， 例 如 Emscripten ( http://kripken. 
github.io/emscripten-site/ )， 这 是 一 个 基于 低层 虚拟 机 (Low-Level Virtual Machine，LLVM ) 的 项 
目 ， 它 能 够 将 C 和 C++ 代码 编译 成 高 度 优化 的 asm.js 格 式 的 JavaScript 代 码 。 这 使 得 你 可 以 在 Web 
上 以 接近 于 原生 速度 运行 C/C++ 代码 。 


JavaScript 有 着 坚实 的 构建 基础 ， 其 中 包括 函数 、 动 态 对 象 、 松 散 类 型 、 原 型 继承 以 及 强大 的 
对 象 字面 记 法 。 

尽管 JavaScript 的 设计 理念 非常 不 错 , 但 遗憾 的 是 , 它 只 能 跟随 浏览 器 的 发 展 。 在 支持 各 种 特 
性 和 标准 方面 ，Web 浏 览 器 声名 狼藉 。JavaScript 斌 图 去 适应 浏览 器 中 各 种 奇 思 妙 想 的 设计 , 结 
作出 了 一 些 非常 糟糕 的 设计 决策 。 多 数 人 被 这 些 不 良 成 分 (bad parts ， 借 由 Douglas Crockford 火 
起 来 的 一 个 术语 ) 蒙 珊 了 双眼 ,忽视 了 语言 中 那些 优秀 的 部 分 。 一 些 程序 员 写 出 的 差劲 代码 成 为 
调试 这 些 代 码 的 另 一 批 程序 员 的 璐 梦 ， 而 JavaScript 则 背负 了 骂 名 。 因 此 ，JavaScript 不 幸 地 成 为 
被 误解 最 多 的 编程 语言 之 一 ( http://javascript.crockford.com/javascript.html )。 


对 JavaScript 的 另 一 种 批评 是 , 你 不 用 真正 掌握 这 门 语言 就 可 以 把 问题 搞定 。 我 见 过 一 些 程序 
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员 写 出 了 糟糕 得 令 人 发 指 的 JavaScript 代 码 ， 仅 仅 就 是 因为 他 们 想 尽 快 完成 任务 ， 而 JavaScript 偏 
山 也 允许 他 们 这 么 干 ,我 曾 花 费 大 量 时 间 来 调试 一 个 压根 就 算 不 上 程序 员 的 家 伙 编 写 的 JavaScript 
代码 ， 质 量 真 是 差劲 到 家 了 。 但 是 你 不 能 因为 自己 的 编程 水 平 不 到 家 ， 就 把 怨气 撒 在 语言 身上 ， 
毕竟 它 只 是 一 种 工具 而 已 。 就 像 所 有 的 手艺 一 样 ， 编 程 也 需要 全 身心 的 投入 和 自律 。 












































1.1 JavaScript 极 简 史 


1993 年 ， 美 国 国家 超级 计算 机 应 用 中 心 (NCSA ) 的 Mosaic 浏 览 器 是 当时 流行 的 首 批 Web 浏 
览 器 之 一 。 一 年 后 ， 网 景 公司 推出 了 其 专 有 的 Web 训 览 器 : Netscape Navigator。 多 名 Mosaic 的 早 
期 设计 人 员 参 与 了 Navigator 的 开发 。 


1995 年 ， 网 景 公 司 雇用 了 Brendan Eich ， 人 允诺 他 在 浏览 器 中 实现 Scheme (一 种 Lisp 方 言 )。 在 
此 之 前 ， 网 景 公 司 与 Sun 公 司 (已 被 Oracle 公 司 收购 ) 进行 过 接触 ， 试 图 将 Java 纳 入 到 Navigator 
浏览 需 中 。 

由 于 Java 的 流行 性 和 易 用 性 , 网 景 公 司 决 定 自家 浏览 器 中 的 脚本 语言 的 语法 必须 和 Java 类 似 。 
这 直接 就 把 已 有 的 那些 语言 , 如 Python、TCL( Tool Command Language, 工具 命令 语言 ) 或 Scheme 
排除 在 外 了 。1995 年 5 月 , Eich 只 花 了 10 天 时 间 就 写 出 了 最 初 的 原型 (http://www.computer.org/csdl/ 
mags/co/2012/02/mco2012020007.pdf )。 JavaScript 一 开始 的 代号 是 Mocha， 是 由 Marc Andreessen 
命名 的 。 由 于 注册 商标 方面 的 原因 ， 网 景 公 司 随 后 将 其 更 名 为 LiveScript。1995 年 12 月 初 ，Sun 公 
司 将 注册 商标 Java 授 权 给 了 网 景 公 司 ， 于 是 这 门 语言 终于 拥有 了 最 终 的 名 字 : JavaScript。 




































































1.2 ”如 何 阅读 本 书 


这 并 不 是 一 本 快餐 类 读物 。 本 书 关注 的 是 正确 的 JavaScript 编 程 方 式 。 我 们 会 用 大 量 的 篇 幅 来 
学 习 如 何 避 开 该 门 语言 中 的 不 良 成 分 , 构建 可 靠 、 可 读 的 JavaScript 代 码 。 为 了 避免 对 那些 糟糕 的 
语言 特性 形成 依赖 ,我 们 选择 对 其 敬而远之 ; 如 果 已 经 养 成 了 不 好 的 编码 习惯 ,本 书 将 尽力 帮 你 
摆脱 这 种 问题 。 本 书 会 重点 强调 使 用 正确 的 风格 和 工具 来 改善 代码 。 


本 书 中 的 大 部 分 概念 都 反映 了 现实 世界 中 的 问题 和 模式 。 我 坚持 认为 读者 应 该 自己 动手 输入 
每 一 段 代码 ， 以 确保 彻底 理解 这 些 概 念 。 相 信 我 ， 要 学 编程 ， 没 有 什么 方法 比 动手 编写 大 量 代码 
更 好 的 了 。 


通常 需要 创建 一 个 HTML 页 面 来 运行 嵌入 的 JavaScript 代 码 : 



























































<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="script.js"></script> 
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<script type="text/javascript"> 
Var x = "Hello World"; 
console.1log (x); 
</script> 
</head> 
<body> 
</body> 
</html> 


这 段 示例 代码 展示 了 在 HTML 页 面 钥 入 JavaScript 代 码 的 两 种 方式 。 第 一 种 方式 是 通过 
<head> 中 的 <script> 标 签 导 入 JavaScript， 第 二 种 方式 是 利用 <script> 标 签 钥 入 内 联 
JavaScript。 






































下 载 示 例 代码 
> 可 以 用 你 的 账户 从 http:/www.packtpub.com 中 下 载 所 购买 的 所 有 Packt 图 书 
Q 的 示例 代码 。 如 果 你 是 从 其 他 地 方 买 的 (英文 版 ) 可 以 访问 http:/www.packtpub. 
com/support 并 注册 ， 通 过 电子 邮件 取得 示例 代码 。 


可 以 把 HTML 页 面 保存 在 本 地 ， 然 后 在 浏览 器 中 打开 。 在 FireFox 中 ， 打 开 Developer 控 制 台 
( FireFox 菜 单 | Developer | Web Console )， 此 时 会 看 到 在 Console 标 签 下 出 现 了 "Hello Worlgd" 文 
本 。 在 你 用 的 操作 系统 和 浏览 器 上 ， 屏幕 显示 可 能 会 不 太一 样 : 








R | epeeer 6 


Net @ CSS ©® JS ® Security 
"Hello World" 











打开 页 面 ， 然 后 使 用 Chrome 的 Developer Tool 来 进行 检查 : 








| Console | Search Emulation Rendering 





© 可 <topframe> v Preserve log 





@ Failed to load resource: file:///Users/8288/Documents/script,is 
net: :ERR_FILE_NOT_FOUND 
Hello World 1.html:8 





> 


这 里 我 们 注意 到 一 个 很 有 意思 的 现象 : 在 控制 台中 出 现 了 一 个 丢失 .js 文件 的 错误 信息 , 这 个 
文件 是 通过 下 面 这 行 代码 导入 的 : 








<script type="text/javascript" src="script.js"></script> 


使 用 浏览 器 的 开发 者 控制 台 或 是 扩展 ( 如 Firebug ), 可 以 非常 方便 地 调试 代码 中 出 现 的 错误 。 
在 随后 的 章节 中 ， 将 详细 讨论 相关 的 调试 技巧 。 
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为 书 中 的 每 一 个 练习 创建 这 种 HTML 脚 手 架 (scaffold ) 很 是 乏味 ,因此 我 们 打算 使 用 一 种 用 
于 JavaScript 的 读 取 - 求 值 -输出 -循环 REPL )。JavaScript 不 像 Python 那 样 
配备 了 REPL， 我 们 可 以 把 Node,js 作 为 奉 代 。 如 果 已 经 安装 了 Node.js， 那 么 只 需要 在 命令 行 中 输 
人 人 node 就 可 以 开始 动手 练习 了 。 你 会 注意 到 ，Node REPL 显 示 的 错误 信息 实在 是 不 怎么 像样 。 


来 看 看 下 面 的 例子 : 


EN-VedA:~$ node 

>function greeter(){ 
x="World"l1 

SyntaxError: Unexpected identifier 
at Object .exports .CreateScript (vm.js:44:10) 
at REPLServer.defaultEval (repl.js:117:23) 
at bound (domain.js:254:14) 








出 现 错误 之 后 ， 只 能 从 头 再 来 。 不 过 ， 它 仍然 可 以 帮助 你 快速 测试 短 的 代码 片段 。 

















我 个 人 经 常 使 用 的 另 一 个 工具 是 JS Bin( http://jsbin.com/ )。JS Bin 提 供 了 大 量 的 JavaScript 测 
试 工具 ， 例 如 语法 高 亮 和 运行 时 刻 错误 检测 。 下 面 是 JS Bin 的 运行 界面 : 


























四 Fiev Addlibrary Share HTML CSS JavaScript 


JavaScript ~ Console 
function test(){ "handle not a number casen 
var underterminedValue = "elephant"; 


if (isNaN(parseInt(underterminedValue,2))) "handle not a number casen 
{ 


console.log("handle not a number case'"); "handle not a number case" 


else 


console.log("handle number case"); 
} 


test(); 











可 以 根据 自己 的 喜好 , 选择 能 够 简化 示例 代码 测试 的 工具 。 不 管 选择 哪 种 工具 ,一定 不 要 错 
过 书 中 任何 一 个 练习 。 








1.3 Hello World 








任何 一 门 编程 语言 都 不 能 没有 Hello World 程 序 一 本 书 怎么 可 能 例外 呢 ? 
在 JS Bin 中 输入 以 下 代码 (不 要 复制 粘贴 ): 





function sayHello(what) { 
return "Hello " + what; 


} 
console.log(sayHello ("world")); 
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异 幕 显示 如 下 内 容 : | 

















到 File ~ Add library Share HTML CSS JavaScript Console 。 Output 
JavaScript v Console 
function sayHello(what) { "Hello world" 


return "HeLLo " + what; 


} 
console.log(sayHello("world")); 











1.3.1 JavaScript 概览 


简 而 言 之 ，JavaSceript 是 一 种 基于 原型 的 脚本 语言 ， 支 持 动 态 类 型 和 头等 函数 。JavaScript 的 
大 部 分 语法 借鉴 了 Java， 但 同时 也 受到 了 Awk、Perl 和 Python 的 影响 。JavaScript 区 分 大 小 写 ， 并 
且 不 会 受到 空白 字 符 的 影响 。 


1. 注释 
JavaScript 人 允许 单行 或 多 行 注释 ， 其 语法 类 似 于 C 或 Java: 


// 单行 注释 


























/* 这 是 一 个 更 长 的 、 
占据 了 多 行 的 注释 


/* 你 不 能 /* 嵌 套 注释 */ SyntaxError */ 



































变量 是 值 的 符号 名 称 。 变 量 名 ， 或 者 说 是 标识 符 ， 必 须 遵循 特定 的 规则 。 


JavaScript 的 变量 名 必须 以 字母 、 下 划 线 (_ ) 或 是 美元 符 〈$ ) 开头 ， 随 后 的 字符 可 以 包含 数 
字 (0-9 )。 由 于 JavaScript 区 分 大 小 写 , 因此 字母 也 就 包括 字符 A-Z( 大 写 ) 以 及 字符 a-z ( 小写 )。 


也 可 以 在 变量 名 中 使 用 ISO 8859-1 或 者 Unicode 中 的 字母 。 


JavaScript 中 的 新 变量 应 该 使 用 关键 字 var 定 义 。 如 果 声 明了 一 个 变量 ， 但 是 没有 给 它 赋 值 ， 
那么 该 变量 的 类 型 默认 是 未 定义 的 。 有 一 件 很 糟糕 的 事情 ， a 
这 种 变量 会 成 为 隐 式 全 局 变量 ( implict global )。 再 重申 一 遍 : 隐 式 全 局 变量 可 不 是 什么 好 东西 。 
等 讲 到 变量 作用 域 和 闭 包 的 时 候 , 我 们 会 详细 地 讨论 这 个 话题 。 重 要 的 是 要 记 住 : 除非 知道 自己 
在 做 什么 ， 和 否则 要 坚持 使 用 var 关 键 字 来 声明 变量 









































震 









































Var a; / /声明 一 个 未 定义 的 变量 
var bp = 0; 
console.log(b); //0 
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console.l1log(a); //undefined 
console.log (a+b); //NaN 


NaN 是 一 个 特殊 的 值 ， 表 明 内 容 不 是 数字 。 

3. 常量 

可 以 使 用 const 关 键 字 创建 只 读 的 命名 常量 。 常量 名 必须 以 字母 、 下 划 线 或 美元 符 开头 , 余下 
部 分 可 以 包含 字母 、 数 字 或 下 划 线 字符 : 








const area_code = '515°'; 
不 能 通过 赋值 或 重新 声明 来 修改 常量 的 值 ， 常 量 必须 被 初始 化 成 一 个 值 。 
JavaScript 支 持 以 下 标准 类 型 . 


口 Number (数值 ) 

口 String (字符 串 ) 

口 Boolean ( 布尔 ) 

口 Symbol ( ECMAScript 6 中 的 新 类 型 ， 符 号 ) 
口 Object ( 对 象 ) 























= 








和 Function ( 限 数 ) 
Array ( 数组 ) 

Date (日 期 ) 

和 RegExp( 正则 表达 式 ) 


口 Null ( 空 ) 
口 Undefined (未 定义 ) 





4. Number 


Number 类 型 能 够 描述 32 位 整数 和 64 位 浮 点 数 的 值 。 例 如 ， 下 面 的 代码 声明 了 一 个 能 够 保存 
整数 值 的 变量 ， 其 中 的 整数 值 是 通过 字面 量 555 来 定义 的 : 








Var aNumber = 555; 
要 定义 浮 点 数值 ， 需 要 加 入 一 个 小 数 点 和 小 数 点 之 后 的 一 个 数字 : 
var arFloat, = “555.03 


其 实 ,JavaScript 中 并 不 存在 整数 。JavaScript 是 使 用 64 位 浮 点 数 来 描述 整数 的 ， 和 Java 采 用 双 
精度 浮 点 数 的 做 法 一 样 。 


因此 ， 你 会 看 到 如 下 结 
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EN-VedA:~$ node 

> 0.1+0.2 

0.30000000000000004 

> (0.1+0.2)===0.3 

false 

推荐 你 去 StackOverflow ( http://stackoverflow.com/questions/588004/is-floating-point-math-broken ) 
和 http://floating-point-gui.de/ 阅 读 有 关 该 问题 的 详尽 解答 。 重要 的 是 要 明白 涉及 浮 点 数 运算 的 时 候 
应 该 加 倍 小 心 。 在 大 多 数 情况 下 ， 并 不 是 非得 依赖 高 精度 小 数 ,， 但 如 果真 的 需要 的 话 ， 可 以 尝试 
使 用 bigjs ( https:/github.com/MikeMclbigjs ) 这 类 库 来 解决 问题 。 


如 果 编 码 的 对 象 是 有 极 高 精度 要 求 的 金融 系统 , 应 该 以 分 为 单位 来 描述 金额 ,以 避免 取 整 错 
误 。 我 曾经 工作 过 的 一 个 系统 会 将 增值 税 ( VAT ) 取 整 到 两 位 小 数 。 如 果 每 份 订单 都 按照 这 种 方 
法 取 整 ， 一 天 数 千 份 的 订单 会 让 会 计 头疼 死 。 为 此 ,我们 将 整个 Java Web 服 务 栈 和 JavaScript 前 端 
进行 了 一 次 彻底 整修 。 


有 几 个 特殊 值 也 是 Number 类 型 的 一 部 分 。 头 两 个 是 Number .MAX_VALUE 和 Number .MIN_ 
VALUE,， 它们 定义 了 Number 类 型 值 的 上 下 边界 。 所 有 的 ECMAScript 数 字 一 定 都 处 于 这 个 区 间 内 ， 
概 莫 能 外 。 但 是 运算 能 够 产生 一 个 不 在 此 区 间 的 数字 。 当 运算 产生 的 数字 大 于 Number .MAX_ 
VALUE 时 ， 运 算 结 果 被 赋 以 Number .POSITIVE_INFINITY， 表 示 该 结果 不 再 是 数字 值 。 与 此 类 
似 ， 如 果 运 算 产 生 的 数字 小 于 Number .MIN_VALUE ， 运 算 结 果 被 赋 人 以 Number .NEGATIVE_ 
INFINITY， 同 样 表示 非 数 字 值 。 如 果 运 算 返 回 的 值 是 无 穷 ， 则 该 结果 不 能 用 于 后 续 的 运算 。 可 
以 使 用 isIinfinite() 方 法 来 验证 运算 结果 是 否 为 无 穷 。 


JavaScript 另 一 个 特殊 之 处 在 于 它 有 一 个 叫 作 NaN (NotaNumber 的 缩写 ) 的 特殊 值 。 一 般 来 
说 ， 这 个 值 会 出 现在 类 型 (String 、Boolean 等 ) 转换 失败 的 时 候 。 观 察 下 面 代 码 中 NaN 的 特点 : 


EN-VedA:~ $ node 

> isNaN(NaN); 

true 

> NaN==NaN; 

false 

> isNaN("elephant"); 
true 

> NaN+5; 

NaN 


第 二 行 很 奇怪 一 一 NaN 不 等 于 NaN。 如 果 NaN 出 现在 数学 运算 中 的 任何 一 部 分 ， 结 果 都 会 变 
成 NaN。 作 为 一 个 通用 规则 ,不 要 在 任何 表达 式 中 使 用 NaN。 对 于 高 级 数学 运算 ， 可 以 使 用 Math 
全 局 对 象 及 其 方法 : 

> Math.E 

2.718281828459045 


> Math.SQRT2 
1.4142135623730951 
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> Math.abs(-900) 
900 

> Math.pow(2,3) 
8 


可 以 使 用 parseInt () 和 parseFloat () 方 法 将 字符 串 表 达 式 转换 成 整数 或 浮 点 数 : 


> parseInt ("230",10); 

230 

> parseInt ("010",10); 

10 

> parseInt ("010",8); // 八 进 制 
8 

>parseInt ("010",2); // 二 进 制 
2 

>+ "4" 

4 


使 用 parseInt () 的 时 候 ， 应 该 明确 地 给 出 一 个 基数 ， 避 免 在 老 版 本 的 浏览 器 上 出 现 出 人 意 
料 的 结果 。 最 后 一 个 技巧 是 使 用 + 号 将 字符 串 "42" 自动 转换 成 数字 42。 使 用 isNaN() 处 理 
parseInt () 的 结果 也 是 一 种 明智 的 做 法 。 让 我 们 来 看 看 下 面 的 例子 : 























var underterminedValue = "elephant" 
if (isNaN(parseInt (underterminedValue,2))) 


{ 





console.log("handle not a number case"); 
} 
else 
{ 

console.log("handle number case"); 


} 


在 这 个 例子 中 ， 如 果 变 量 underterminedvalue 的 值 是 通过 外 部 接口 设置 的 ， 则 你 无 法 确 
定 该 变量 值 的 类 型 。 如果 不 使 用 isNaN () 进行 处 理 , parseInt () 将 会 产生 异常 ,导致 程序 前 省。 
































5. 字符 串 

在 JavaScript 中 , 字符 串 是 一 个 Unicode 字 符 序 列 ( 每 个 字符 占 16 位 )。 字符 串 中 的 字符 可 以 按 
照 索 引 访问 ， 第 一 个 字符 的 索引 是 0。 字 符 串 包含 在 "或 ' 之 中 ， 这 两 种 符号 都 是 描述 字符 串 的 有 
效 方式 。 来 看 看 下 面 的 例子 : 



































> console.log("Hippopotamus chewing gum"); 
Hippopotamus chewing gum 

> console.log('Single quoted hippopotamus'); 
Single quoted hippopotamus 

> console.log("Broken \n lines"); 
Broken 

lines 


最 后 一 行 展示 了 当 配 合 转 义 字符 \ 使 用 的 时 候 ， 有 些 字符 可 以 成 为 具有 特殊 意义 的 字符 。 下 
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面 是 一 些 特 殊 字 符 的 例子 。 








口 \n: 换行 符 

口 \t: 制 表 符 

口 \b: 退 格 

口 \r: 回 车 

口 \\: 反 斜 杠 

口 \': 单 引 号 

口 \": 双 引 号 

JavaScrript 字 符 串 默认 支持 特殊 字符 以 及 Unicode 字 符 : 
> '\xA9!' 

> ! Nu00RA9 


就 JavaScript 中 的 String 、Number 和 Boolean 类 型 而 言 ， 








重要 的 是 要 知道 它们 都 可 以 通过 包装 














其 原始 值 (primitive equivalent ) 而 形成 对 应 的 包装 对 象 (wrapper object )。 下 面 的 示例 展示 了 包 























装 对 象 的 用 法 : 
var s = new String ("dummy"); // 创 建 一 个 SEring 对 象 
console.1log(s); //"dummy" 
console.log(typeof s); //"object" 
Var nonObject = "1" + "2"; // 创 建 一 个 原始 的 String 类 型 
console.log(typeof nonObject); //"string" 
var objString = new String ("1" + "2"); /// 创 建 一 个 String 对 象 
console.log(typeof objString); //"object" 
// 工 具 涵 数 
console.log("Hello".length); //5 
console.log("Hello".charAt (0)); //"H" 
or Rt ee i A i 0 
console.log("Hello".indexOf (" yA 
a //3 
console.log("Hello".startsWith("H")); //true 
console.log("Hello".endsWith("o")); //true 
console.log("Hello".includes ("XxX")); //false 
Var splitStringByWords = "Hello World".split(" "); 
console.log(splitSstringByWords); //["Hello", "World"] 
Var splitSstringByChars = "Hello World".split(""); 
console.log(splitSstringByChars); //["H", "e", "1", "1", "o", "~ ", 
OR Wr 
console.log("lowercasestring".toUpperCase()); //"LOWERCASESTRING" 
console.1og ("UPPPERCASESTRING" .toLowerCase()); //"upppercasestring" 
console.log("There are no spaces in the end 人 
// "There are no spaces in the end" 
JavaScript 也 允许 多 行 字 符 串 ， 这 种 字符 串 是 由 ` 字符 ( 重音 符 : https://en.wikipedia.org/wiki/ 





Grave_accent ) 包围 形成 的 。 来 看 下 面 的 例子 : 
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> console.1log(`Sstring text on first line 
string text on second line `)， 

"string text on first line 

string text on second line " 


这 种 字符 串 也 被 称 为 模板 字符 串 (template string )， 可 用 于 字符 串 插 值 ( string interpolation )。 
JavaScript 利 用 这 种 语法 来 实现 Python 风格 的 字符 串 插值 。 


通常 ， 可 以 像 下 面 这 样 做 : 





Var a=1, b=2; 
console.log("Sum of values is :" + (a+b) + " and multiplication is :" + (a*b)); 


如 果 借 助 字符 串 插 值 的 话 ， 代 码 会 变 得 更 清晰 : 


console.log( .Sum of values is :${a+b} and multiplication is : ${a*b}  ); 





6. Undefined 


JavaScript 使 用 两 个 特殊 的 值 来 表示 不 存在 有 意义 的 值 一 一 null 和 undefined。 前 者 表明 无 值 
(non-value )， 是 有 意 为 之 的 ; 而 后 者 表明 变量 尚未 赋值 。 来 看 下 面 的 例子 : 























> Var xl1; 

> console.log(typeof x1); 
undefined 

> console.log(null==undefined); 
true 


7. Boolean 


JavaScript 中 Boolean 类 型 的 原始 值 是 由 关键 字 true 和 false 描 述 的 。 下 面 的 规则 说 明了 什么 


是 false， 什 么 是 true: 





























口 false、0、 空 串 ("" )、NaN、null 和 undefined 都 被 视 为 false 
口 其 他 的 都 被 视 为 true 


Boolean 类 型 难以 捉摸 之 处 ， 主 要 在 于 其 行为 与 创建 之 时 大 相 径 庭 。 
在 JavaScript 中 有 两 种 方法 可 以 创建 Boolean 类 型 的 值 。 
口 可 以 将 字面 量 true 或 false 赋 给 变量 。 考 虑 下 面 的 例子 : 














Var pBooleanTrue = true; 
Var pBooleanFalse = false; 


口 使 用 Boolean () 图 数 。 这 是 个 普通 的 函数 ， 可 以 返回 一 个 Boolean 类 型 的 原始 值 : 




















Var fBooleanTrue = Boolean(true); 
Var fBooleanFalse = Boolean(false); 
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这 两 种 方法 都 可 以 返回 所 期 望 的 真 值 或 假 值 ， 但 如 果 使 用 new 操 作 符 创建 一 个 Boolean 对 象 ， 
那 可 就 大 错 特 错 了 。 


当 使 用 new 操 作 符 和 Boolean (value) 构造 函数 时 ,得 到 的 并 不 是 原始 的 true 或 false, 而 
是 一 个 对 象 ， 而 且 不 幸 的 是 ，JavaScript 将 对 象 视 为 真 (truthy ): 






































Var oBooleanTrue = new Boolean (true) 
Var oBooleanFalse = new Boolean(false); 
console.log(oBooleanTrue); //true 
console.log(typeof oBooleanTrue); //object 
if(oBooleanFalse)t{ 

console.log("I am seriously truthy, don't believe me"); 
} 
>"I am seriously truthy, don't believe me" 


if(oBooleanTrue)t{ 

console.log("I am also truthy, see ?"); 
} 
>"I am also truthy, see ?" 


// 使 用 valueOf () 在 布尔 对 象 中 提取 真正 的 值 
if (oOBooleanFalse.valueof () ){ 
console.log("With valueOf, I am false"); 
}elset 
console.log("Without valueOf, I am still truthy"); 
} 
>"Without valueOf, I am still truthy" 


所 以 ， 聪明 的 做 法 是 避免 使 用 Boolean 构 造 函 数 来 创建 新 的 Boolean 对 象 。 它 破坏 了 Boolean 
类 型 的 基本 逻辑 ， 应 该 离 这 种 难以 调试 的 问题 代码 远 远 的 。 


8. instanceof 操 作 符 


使 用 引用 类 型 存储 值 的 一 个 问题 是 typeof 操 作 符 ， 不 管 引用 的 是 什么 类 型 的 对 象 ， 该 操作 符 
返回 的 都 是 object。 可 以 使 用 instanceof 操 作 符 来 解决 该 问题 。 来 看 下 面 的 例子 : 


var aStringObject = new String("string"); 
































console.log(typeof astringObject); //"object" 
console.log(aStringObject instanceof String); //true 
Var aString = "This is a string"; 

console.log(aSstring instanceof String); //false 





第 3 行 返回 的 是 false。 当 讲 到 原型 链 的 时 候 ， 我 们 会 讨论 为 什么 会 出 现 这 种 情况 。 








9. Date 对 象 


JavaScript 并 没有 日 期 数据 类 型 。 不 过 , 可 以 在 应 用 程序 中 使 用 Date 对 象 及 其 方法 来 处 理 日 期 
和 时 间 。Date 对 象 中 的 内 容 非 常 详尽 ， 其 中 包含 的 一 些 方法 能 够 处 理 绝 大 部 分 与 日 期 和 时 间 相 关 
的 问题 。 
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JavaScript 处 理 日 期 的 方法 和 Java 类 似 。 在 JavaScrpt 中 , 日 期 被 存储 为 自 1970 年 1 月 1 日 00:00:00 
起 的 毫秒 数 。 


可 以 使 用 以 下 声明 创建 一 个 Date 对 象 : 
var dataObject = new Date([parameters]); 
Date 对 象 构造 水 数 的 参数 如 下 。 


口 不 提供 参数 ， 创 建 的 是 当前 的 日 期 和 时 间 。 例 如 ，var today = new Date();。 

口 描述 日 期 的 字符 串 ， 形 如 Montnhn day， year hours:minutes:seconds。 例 如 ，var 
twoThousandFifteen = new Date("December 31，2015 23:59:59");。 如 果 忽 
略 了 时 、 分 或 秒 ， 这 些 值 会 被 设置 为 0。 

口 一 组 表示 年 、 月 、 日 的 整数 。 例 如 ，var christmas = new Date(2015, 11, 25);。 

口 一 组 表示 年 、 月 、 日 、 时 、 分 和 秒 的 整数 。 例 如 ，var christmas = new Date(2015， 

Le 2D ZT “00% ‘00) me 





























在 JavaScript 中 创建 及 处 理 日 期 的 示例 如 下 : 


Var today = new Date(); 





console.log(today .getDate()); //27 
console.log(today .getMonth()); //4 
console.log(today.getFullYear()); //2015 
console.log(today.getHours()); //23 
console.log(today.getMinutes()); //13 
console.log(today.getSeconds()); //10 

// 自 1970 年 1 月 1 日 00:00:00 UTC 之 后 的 毫秒 数 
console.log(today.getTime()); //1432748611392 
console.log(today .getTimezoneOffset()); //-330 Minutes 
// 计 算 逝 去 的 时 间 

Var start = Date.now(); 

/ /循环 很 长 一 段 时 间 

for (var i=0;i<100000;i++); 

Var end = Date.now(); 





var elapsed = end - start; // 以 毫秒 为 单位 的 逝去 时 间 


console.log(elapsed); //71 


对 于 任何 需要 对 日 期 和 时 间 进 行 精细 控制 的 应 用 程序 ， 推 荐 使 用 Moment,js ( https://github. 
com/moment/moment ) Timezone.js( https://github.com/mde/timezone-js ) 或 date.js( https://github.com/ 
MatthewMuellerdate ) 这 样 的 库 。 这 些 库 为 你 简化 了 大 量 的 重复 性 任务 ， 有 助 于 你 将 精力 集中 在 
其 他 重要 的 方面 。 

10. + 操作 符 


当 用 作 单 目 操作 符 的 时 候 ，+ 操 作 符 不 会 对 Number 类 型 产生 影响 。 但 如 果 应 用 在 字符 串 关 
上 ， 会 将 其 转换 成 数字 : 


互 





























去 
之 


上 
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WW 沁 三 多 5 
a=+a; // 对 a 的 值 没 有 影响 
console.log(a); //25 





Var Bes 

console.log(typeof b); //string 
b=+b; // 将 字符 囊 转换 成 数字 
console.log(b); //70 
console.log(typeof b); //number 


程序 员 通 常 使 用 + 操作 符 快速 地 将 字符 串 转 换 成 数字 。 但 如 果 字 符 串 字 面 量 无 法 转换 成 数字 
的 话 ， 结 果 会 有 些 出 人 意料 : 























Var Gatoor: 

c=+C; // 将 foo 转 换 成 数字 
console.log(c); //NaN 
console.log(typeof c); //number 


Va eos ns 
Zero=+Zero; // 将 空 串 转 换 成 0 


console.log (zero); 
console.log(typeof zero); 


随后 的 章节 中 会 讨论 + 操作 符 在 其 他 数据 类 型 上 的 效果 。 
11. ++ 和 -- 操 作 符 


++ 操 作 符 和 -- 操 作 符 都 是 一 种 快捷 方式 ， 前 者 可 用 于 给 数值 加 1， 后 者 可 用 于 从 数值 中 减 1。 
Java 和 C 中 都 有 同样 的 操作 符 ， 大 多 数 人 对 其 并 不 陌生 。 考 虑 下 面 的 代码 : 


Var as 13 











var b= a+t++; 
console.1o0g(a); //2 
console.log(b); //1 


怎么 回 事 ? 变量 b 的 值 难 道 不 应 该 是 2 吗 ?++ 和 -- 操 作 符 都 是 单 目 操作 符 ， 既 可 作为 前 级 ， 
也 可 以 作为 后 级 。 它们 所 出 现 的 位 置 很 重要 。 当 ++ 作 为 前 级 的 时 候 , 如 ++a, 会 先 增加 变量 的 值 ， 


然后 再 将 该 值 从 表达 式 返 回 ， 而 不 是 像 a++ 那 样 ， 先 返回 a 的 当前 值 ， 然 后 再 增加 。 来 看 看 下 面 
的 代码 : 


























2 

var b= ++a; 
console.1og(a); //2 
console.log(b); //2 


很 多 程序 员 喜 欢 使 用 链 式 赋 值 的 方式 将 一 个 值 赋 给 多 个 变量 


Var a Dy C3 
a DD: 
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这 样 做 没有 问题 ， 因 为 赋值 操作 符 ( = ) 的 作用 就 是 赋值 。 在 这 个 例子 中 ，c=0 的 求 值 结果 
为 0; 这 会 产生 b=0， 该 表达 式 的 结果 也 是 0， 随 之 就 是 对 a=0 求 值 了 。 


但 如 果 对 上 面 的 例子 做 一 个 细小 的 改动 ， 就 会 造成 截然 不 同 的 效果 。 考 虑 如 下 代码 : 
Var a es BE: 0 


在 这 个 例子 中 ,使 用 var 声 明 的 变量 只 有 a， 变 量 b 意 外 地 成 为 了 全 局 变量 (如果 处 于 严格 模 
式 的 话 ， 此 处 会 报错 )。 想 要 用 好 JavaScript， 想 实现 期 望 的 结果 时 一 定 要 谨慎 。 


12. 布尔 操作 符 
JavaScript 中 有 三 个 布尔 操作 符 : AND (&)、OR (|) 和 NOT (!)。 


在 讨论 逻辑 AND 和 OR 操 作 符 之 前 ， 需 要 搞 明 白 它 们 是 如 何 产生 布尔 结果 的 。 逻 辑 操作 符 的 
求 值 方向 是 从 左 到 右 ， 使 用 下 面 的 短路 规则 进行 测试 。 
口 逻辑 AND : 如 果 第 一 个 操作 数 能 够 决定 最 终结 果 ， 那 么 第 二 个 操作 数 就 无 需 再 求 值 了 。 
在 下 面 的 例子 中 ， 凡 是 表达 式 的 右 侧 按 短 路 求 值 规则 得 以 执行 的 ， 我 都 做 了 突出 标记 : 
console.log(true && true); // true AND true 返 回 true 
console.log(true && false);// true AND false 返 回 false 


( 
( 
console.log(false && true);// false AND true 返 回 false 
console.log("Foo" && "Bar");// Foo(true) AND Bar(true) 返 回 Bar 

( 

( 

( 





















































console.log(false && "Foo");// false && FoO(true) 返 回 false 


console.log("Foo" && false);// Foo(true) && false 返 回 false 




















console.log(false && (1 == 2));// false && false(1==2) 返 回 false 
口 逻辑 OR: 如 果 第 一 个 操作 数 为 真 ， 第 二 个 操作 数 就 无 需 再 求 值 了 。 

console.log(true || true); // true AND true 返 回 true 

console.log(true || false);// true AND false 返 回 true 





console.log(false | 


( 

( 

( true);// false AND true 返 回 true 
console.log("Foo" 

( 

( 

( 


| 

| "Bar");// Foo(true) AND Bar(true) 返 回 Foo 
console.log(false || "Foo");// false && Foo(true) 返 回 Foo 
console.log("Foo" | 
| 


console.log(false 


false);// Foo(true) && false 返 回 FOO 
(1 == 2));// false && false(1==2) 返 回 false 


不 过 , 逻辑 AND 和 逻辑 OR 也 可 以 用 于 非 Boolean 类 型 的 操作 数 。 如 果 左 、 右 操作 数 有 任意 
一 个 不 是 原始 的 Boolean 类 型 值 ，AND 和 OR 也 不 会 返回 Boolean 类 型 值 。 


现在 我 们 来 解释 这 三 个 逻辑 布尔 运算 符 。 


口 逻辑 AND ( && ): 如 果 第 一 个 操作 数 为 假 ， 则 它 返回 该 操作 数 ;， 如 果 为 真 ， 则 返回 第 二 
个 操作 数 。 


console.log (0 && "Foo"); // 第 一 个 操作 数 为 假 ， 则 返回 该 操作 数 
console.1og ("Foo"” && "Bar"); // 第 一 个 操作 数 为 真 ， 则 返回 第 二 个 操作 数 








图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 


1.3 Hello World 15 








口 逻辑 OR (|): 如 果 第 一 个 操作 数 为 真 ， 它 返回 该 操作 数 ， 否 则 ， 返 回 第 二 个 操作 数 。 | 





console.log (0 || "Foo"); // 第 一 个 操作 数 为 假 ， 则 返回 第 二 个 操作 数 
console.1og ("Foo" || "Bar"); // 第 一 个 操作 数 为 真 ， 则 返回 该 操作 数 


console.log (0 11 false); // 第 一 个 操作 数 为 假 ， 则 返回 第 二 个 操作 数 
逻辑 OR 的 典型 用 法 是 为 变量 分 配 默 认 值 : 


function greeting(name) { 
name = name || "John"; 
console.log("Hello " + name); 


} 


greeting("Johnson"); // 输出 "Hello Johnson"; 
greeting(); // 输 出 "Hello John" 


你 会 在 多 数 具有 专业 水 准 的 JavaScript 库 中 频繁 地 看 到 这 种 用 法 。 你 应 该 理解 如 何 通过 使 
用 逻辑 OR 运 算 符 进行 默认 赋值 。 
口 逻辑 NOT: 总 是 返回 一 个 Boolean 类 型 的 值 。 所 返回 的 具体 值 如 下 : 

// 如 果 操 作 数 是 对 象 ， 返回 false 


Var s = new String("string"); 
console.log(!s); //false 





/ /如 果 操 作 数 是 数字 0， 返回 true 
var t Ee :03 
console.log(!t); //true 


/ /如果 操 作 数 是 除 0 之 外 的 任意 数字 ,返回 false 
vat ee LS 
console.log(!x); //false 


/ /如 果 操 作 数 是 null 或 NaN， 返 回 true 

Var yy cnnul]s 

Var SZ = ,NaNs 

console.log(!y); //true 
console.log(!z); //true 

// 如 果 操 作 数 未 定义 (undefined) ,返回 true 
var foo; 

console.log(!foo); //true 


除 此 之 外 ，JavaScript 也 支持 类 似 于 C 中 的 三 元 操作 符 : 
Var allowedToDrive = (age > 21) ? "yes" : "no"; 


如 果 (age > 21) 为 真 ，? 之 后 的 值 会 被 赋 给 变量 a11owedToDrive; 否则 ,将 :之 后 的 值 赋 
给 该 变量 。 其 效果 等 同 于 让 条 件 语 句 。 来 看 另外 一 个 例子 : 
function isAllowedToDrive(age)t{ 
if(age>21){ 


return true; 
}elsel{ 
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return false; 
和 


} 
console.log(isAllowedToDrive(22)); 


在 这 个 例子 中 ,函数 isAl1lowedToDrive () 接 受 一 个 整 型 参数 age。 根 据 该 参数 的 值 ， 向 调 
用 函数 返回 true 或 false。 这 是 一 种 众所周知 , 也 是 最 为 熟悉 的 if-else 条 件 逻 辑 。 大 多 数 时 候 , if-else 
能 够 使 得 代码 更 易 读 。 对 于 单一 条 件 而 言 ,也 可 以 使 用 三 元 操作 符 , 但 如 果 发 现 自己 在 比较 复杂 
的 表达 式 中 用 到 了 该 操作 符 , 最 好 还 是 换 用 if-else， 因 为 相 较 于 难 懂 的 三 元 操作 符 表 达 式 ,if-else 











的 易 读 性 更 好 。 
if-else 条 件 语句 可 以 藤 套 如 下 : 


if (condition1) { 
statement1 

} else if (condition2) { 
statement2 

} else if (condition3) { 
statement3 


} 





} else { 
statementN 


} 
也 可 以 纯粹 依据 个 人 喜好 ， 像 下 面 这 样 缩 进 吝 套 的 else if: 





if (condition1) { 
statement1 
} else 
if (condition2) { 


不 要 在 条 件 语句 中 进行 赋值 。 大 多 数 时 候 ， 这 都 是 错误 的 用 法 : 





if(a=b) { 
/ /执行 相关 操作 
} 


这 多 半 是 个 错误 ， 代 码 本 应 该 
1 PD 

















if (a==b) ,或 者 写 得 更 好 些 ，if (a===b) 。 如 果 把 条 件 语 


是 
句 误 写成 赋值 语句 ， 算 是 给 自己 留 下 了 一 个 极 难 查 找 的 错误 。 如 果真 的 想 在 if 语 句 中 使 用 赋值 语 





句 ， 务 必 理 清 思 路 。 
一 种 方法 是 在 赋值 语句 外 多 加 上 一 对 括号 : 
if((a=b)){ 


// 确 定 执行 相关 操作 
} 








还 可 以 使 用 switch-case 语 句 来 处 理 条 件 执 行 。JavaScript 中 的 switch-case 与 C 或 Java 中 的 类 似 。 


来 看 下 面 的 例子 : 
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function sayDay (day){ | 


switch (day)t{ 
case 1: console.log("Sunday"); 
break; 
case 2: console.log("Monday"); 
break; 


default: 
console.log("We live in a binary world. Go to Pluto"); 








小 
} 


sayDay (1); //Sunday 
sayDay (3); //We live in a binary world. Go to Pluto 


这 种 结构 存在 的 问题 是 必须 在 每 一 个 case 分 支 中 加 入 break, 否则 语句 会 持续 执行 到 下 一 级 。 
如 果 把 第 一 个 case 语 句 中 的 break 语 句 移 去 ， 则 会 输出 以 下 结 














>sayDay (1); 
Sunday 
Monday 


如 你 所 见 ， 如 果 不 使 用 preak 语 句 立 刻 跳出 所 满足 的 条 件 ， 就 会 接着 执行 下 一 级 case 分 支 中 
的 语句 。 这 种 错误 很 难 检测 。 但 如 果 打算 直 落 到 下 一 级 分 支 的 话 ， 有 一 种 常见 的 条 件 逻 辑 写法 : 








function debug(level,msg){ 


switch(level)t 
case "INFO": // 此 处 有 意 急 略 break 语 向 


case "WARN" : 


Case "DEBUG": console.log(level+ ": " + msg); 


break; 
Case "ERROR": console.error (msg); 


} 


} 
debug ("INFO", "Info Message"); 


debug ("DEBUG", "Debug Message"); 
debug ("ERROR", "Fatal Exception"); 


在 这 个 例子 中 ， 出 于 精简 switch-case 的 目的 ， 我 们 有 意 让 执行 流程 直 落 下 来 (fall-through )。 
如 果 参 数 level 的 值 是 INFO、WARN 或 DEBUG， 利 用 switch-case 使 得 流程 落 在 单一 的 执行 位 置 上 。 
为 了 实现 这 个 目的 ， 我 们 省 去 了 break 语 句 。 如 果 想 模仿 这 种 switch 语 句 的 写法 ， 一定 要 记得 将 
用 法 通过 文档 记录 下 来 ， 以 确保 更 好 的 可 读 性 。 

switch 语 句 可 以 有 一 个 aefault 分 支 ， 用 于 处 理 其 他 分 支 所 不 能 覆盖 的 情况 。 

JavaScript 还 拥有 while 和 do-while 循 环 。while 循 环 可 以 在 满足 条 件 之 前 迭代 一 组 表达 式 。 下 面 
第 一 个 例子 迭代 了 1+} 中 的 语句 ， 直 到 满足 表达 式 i<10 为 止 。 记 住 ， 如 果 变 量 i 的 值 已 经 大 于 10， 
则 循环 一 次 都 不 会 执行 。 



































var i=0; 
while(i<10)f{ 
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人 中 和 
console.1log(i); 


} 


下 面 的 循环 会 永 无 休止 地 执行 下 去 ,因为 条 件 总 是 成 立 ， 这 会 导致 灾难 性 的 后 果 。 这 样 的 程 
序 会 耗 尽 所 有 的 内 存 或 其 他 资源 : 

// 死 循环 

while(true) 


/ /不 停 地 执行 此 处 的 操作 
} 


如 果 想 确保 循环 至 少 执行 一 次 ， 可 以 使 用 do-while 循 环 (有 时 也 称 为 后 置 条 件 循环 ): 














var choice; 

do { 
choice=getChoiceFromUserIinput () ; 

} while(!isInputValid(input) ) ; 


在 这 个 例子 中 ,从 用 户 处 获得 输入 , 直到 输入 内 容 有 将 为 止 。 如 果 用 户 输入 的 内 容 不 符合 要 
求 ， 会 要 求 用 户 继续 输入 。 通 常 认为 ， 从 逻辑 上 来 说 ， 所 有 的 do-while 循 环 都 可 以 改写 成 while 循 
环 。 但 是 在 刚刚 看 到 的 那个 例子 中 ， 就 非常 适合 使 用 do-while 循 环 ， 因 为 我 们 希望 在 执行 过 一 次 
循环 之 后 再 检查 条 件 。 


和 C 或 Java 类 似 ，JavaScript 也 有 一 个 功能 强大 的 循环 
用 一 行 就 可 以 定义 循环 控制 条 件 。 


下 面 的 例子 可 以 打印 出 $ 次 Hello: 




















for 循 环 。for 循 环流 行 的 原因 在 于 只 








for (var i=0;i<5;i++){ 
console.log("Hello"); 


在 循环 定义 中 ， 循 环 计数 器 ;的 初始 值 被 设 为 0， 循 环 退 出 条 件 设 为 1<5， 最 后 定义 的 是 计数 
器 增 量 。 

上 例 中 的 三 个 表达 式 都 是 可 选 的 。 如 果 需 要 的 话 ,是 可 以 忽略 不 写 的 。 例 如 , 下面 的 for 循 环 
尽管 形式 不 同 ， 但 生成 的 结果 是 相同 的 : 




















"vat Ky 

// 忽 略 初始 化 

for (;x<5;x++){ 
console.log("Hello"); 


} 


// 忽 略 退出 条 件 

for (var j=0;;j++){ 
// 退 出 条 件 
if (jj>=5) 
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break; 
}elsel{ 
console.log("Hello"); 
} 
} 
// 和 忽略 修改 循环 变量 
for. (vark. Kad0Qy kx} 
console.log("Hello"); 
k++; 


} 


也 可 以 将 这 三 个 表达 式 全 部 忽略 。 一 种 常用 的 惯用 写法 是 使 用 空 循环 体 。 下面 的 循环 用 于 将 
数组 中 所 有 的 元 素 值 设 为 100。 注 意 ， 这 个 for 循 环 并 没有 循环 体 : 

var ert "LO 0 30]3 

// 给 所 有 的 数组 元 素 赋值 100 


for (i = 0; i < arr.length; arr[i++] = 100); 
console.log(arr); 


空 循环 体 的 位 置 就 在 for 循 环 语 句 之 后 。 增 量 表达 式 同 样 修改 了 数组 内 容 。 本 书 随后 会 讨论 数 
组 ， 在 这 里 只 需要 知道 循环 定义 本 身 将 所 有 的 数组 元 素 都 设置 成 100 就 够 了 。 

13. 相等 

JavaScript 提 供 两 种 相等 关系 : 严格 (strict ) 相等 和 非 严 格 ( loose ) 相等 。 从 根本 上 而 言 ， 
在 比较 两 个 值 的 时 候 ， 非 严格 相等 会 进行 类 型 转换 ， 而 严格 相等 不 进行 类 型 转换 。 可 以 通过 === 
执行 严格 相等 比较 ， 通 过 == 执 行 非 严格 相等 比较 。 

ECMAScript 6 还 提供 了 object . is 方法 来 进行 类 似 于 === 的 严格 相等 比较 , 但 是 object .is 
会 针对 NaN 做 特别 处 理 :-0 和 +0。 当 NaN 一 -NaN 和 NaN 一 NaN 的 结果 都 为 false 时 ,Object .is(NaN， 
NaN) 将 返回 true。 

(1) 使 用 === 的 严格 相等 

严格 相等 在 比较 两 个 值 的 时 候 ， 不 会 进行 任何 隐 式 类 型 转换 。 比 较 过 程 中 会 应 用 以 下 规则 。 
口 如 果 值 的 类 型 不 同 ， 则 不 相等 。 
口 对 于 相同 类 型 的 非 数值 ， 如 果 值 相同 的 话 ， 则 相等 。 
口 对 于 Number 类 型 ， 用 严格 相等 来 比较 值 。 如 果 值 相等 ， 则 结果 为 true。 但 是 NaN 不 等 于 任 

何 数 字 ， NaN===<a number> 的 结果 为 false。 


严格 相等 是 检查 相等 关系 时 应 该 使 用 的 正确 方法 。 应 该 设立 这 么 一 条 规则 : 坚持 使 用 ===， 
避免 使 用 ==。 













































































图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 


第 1 章 JavaScript 入 门 

















条 件 输 出 
"se ts false 
二 alse 
=== "0" alse 
false === "false" alse 
false === "0" alse 
false === undefined alse 
false === null alse 
null === undefined alse 
如 果 比 较 对 象 的 话 ， 可 以 得 到 如 下 结 
条 件 输 出 
{} === {} false 
new String('bah') === 'bah'; false 
new Number (1) === 1; false 
Var bar = {}; bar === bar; true 


下 面 这 些 例子 ， 你 应 该 在 JS Bin 或 Node REPL 中 试验 一 下 : 


A hh a 

Var Oo = new String("0"); 

Var B= "Os 

var b = false; 

console.log(n === n); // true - 数值 相同 


; // true - 非 数 字 类 型 比较 


console.logl(o ; 
个 


console.log(s = 


; // false - 不 进行 隐 式 类 型 转换 ， 因 此 类 型 不 相同 


console.1log GQ)s 
s); // false - 类 型 不 同 
S) 


console.1Log 


( 

( 
console.1og(o === ; // false - 类 型 不 同 

( 

( 

( 





console.log(null = undefined); // false 
COnsole 10g (oO-=== nl11)s /7 false 
console.log(o === undefined); // false 


在 进行 严格 相等 比较 的 时 候 ， 可 以 使 用 !== 来 处 理 不 相等 的 情况 
(2) 使 用 == 的 非 严 格 相 等 
不 要 使 用 这 种 形式 的 相等 比较 。 说 真 的， 离 它 越 远 越 好 。 非 严格 相等 有 很 多 缺点 ， 其 主要 原 














因 在 于 JavaScript 的 弱 类 型 化 。 相 等 操作 符 == 在 比较 之 前 会 先 尝试 转换 类 型 。 下 面 的 例子 展示 了 
这 个 过 程 : 
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( 续 ) 
条 件 输 出 
0 == "0" true 
false == "false" false 
false == "0" true 
false == undefined false 
false == null false 
null == undefined true 


从 这 些 例 子 中 显然 可 以 看 出 非 严格 相等 会 导致 出 人 意料 的 结果 。 另 外 , 隐 式 类 型 转换 也 会 对 
性 能 产生 影响 。 因 此 在 JavaScript 中 ， 一 般 不 要 使 用 非 严 格 相等 。 





1.3.2 ” JavaScript 类 型 


我 们 简要 地 提 过 ，JavaScript 是 一 种 动态 语言 。 如 果 你 之 前 有 强 类 型 语言 ( 如 Java ) 的 使 用 
经 验 ， 可 能 会 有 点 不 适应 完全 没有 类 型 检查 的 情况 。JavaScript 的 忠实 粉丝 认为 ， 这 门 语言 是 拥 
有 标签 (tag ) 或 者 说 是 子 类 型 ( subtype ) 的 , 但 没有 类 型 。 尽 管 JavaScript 并 没有 传统 定义 上 的 
类 型 , 但 是 绝对 有 必要 搞 明 白 , JavaScript 在 内 部 是 如 何 处 理 数据 类 型 并 进行 强制 转换 ( coercion ) 
的 。 所 有 正式 的 JavaScript 程 序 都 少不了 要 以 某 种 形式 来 处 理 值 的 强制 转换 ， 因 此 理解 相关 的 概 
念 很 重要 。 


当 自 己 动手 修改 类 型 的 时 候 会 发 生 显 式 强制 转换 ( explicit coercion )。 在 下 面 的 例子 中 ,使 
用 tostring () 将 一 个 数字 转换 成 了 String 类 型 ， 并 从 中 提取 出 第 二 个 字符 : 





















































var fortyTwo = 42; 
console.log(fortyTwo.toString() [1]); // 打 印 出 "2" 


这 是 一 个 显 式 强制 转换 的 例子 。 我们 谈 及 的 类 型 一 词 并 不 是 严格 意义 上 的 ， 因为 在 声明 变量 
fortyTwo 的 时 候 ， 不 需要 强制 指定 类 型 。 

不 过 ， 这 种 强制 转换 还 可 以 通过 很 多 其 他 方式 出 现 。 显 式 强 制 转 换 易 于 理解 ， 可 靠 性 也 好 ; 
但 如 果 不 注意 的 话 ， 强 制 类 型 转换 会 产生 非常 出 人 意料 的 结果 。 

强制 转换 方面 的 困惑 可 能 是 最 让 JavaSript 开 发 人 员 诅 丧 的 话题 之 一 。 为 了 确保 你 不 会 产生 这 
样 的 疑惑 ， 来 回顾 一 下 JavaScript 中 的 类 型 。 之 前 讨论 过 这 方面 的 一 些 概念 : 
























































typeof 1 === "number"; // true 
typeof "1" === "string"; // true 
typeof { age: 39 } === "object"; // true 
typeof Symbol () === "symbol"; // true 
typeof undefined === "undefined"; // true 
typeof true === "boolean"; // true 
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到 目前 为 止 , 一切 都 还 不 错 。 我 们 对 此 已 经 有 过 了 解 ， 刚刚 看 到 的 例子 再 次 巩固 了 关于 类 型 
的 概念 。 


将 值 从 一 种 类 型 转换 成 男 一 种 类 型 叫 作 类 型 转换 ( casting ) 或 显 式 强制 转换 。JavaScript 也 会 
基于 某 些 猜测 来 更 改 值 的 类 型 , 这 叫 作 隐 式 强制 转换 ( implict coercion )。 这 种 猜测 使 得 JavaScript 
解决 了 一 些 问题 , 但 同时 也 遗憾 地 引发 了 一 些 悄 无 声息 且 出 乎 意料 的 错误 。 下面 的 代码 片段 展示 
了 一 些 显 式 和 隐 式 的 强制 转换 : 





























Var tal 

Var u=""+t; // 隐 式 强制 转换 
console.log(typeof t); //"number" 
console.log(typeof u); //"string" 
Var V=String(t); // 显 式 强制 转换 
console.log(typeof v); //"string" 
var x=null 

CONSole. lO0g (Ts); //InulLl" 


很 容易 就 可 以 看 出 结果 。 当 t 的 值 是 数字 ( 这 里 是 1 ) 的 时 候 ，" "+t 会 使 得 JavaScript 认 为 你 
要 将 某 些 内 容 和 字符 串 " "拼接 在 一 起 。 因 为 只 有 字符 串 才 能 彼此 拼接 ， 所 以 JavaScript 就 先 将 数 
字 1 转 换 成 字符 串 "1" ,然后 再 将 两 者 拼接 起 来 ,形成 最 终 的 结果 ( 字符 串 值 )。 这 就 是 JavaScript 
实施 隐 式 转换 的 过 程 ,而 string (t) 则 是 一 个 意图 非常 明确 的 调用 ,用 于 将 一 个 数字 转换 成 String 
类 型 。 这 是 一 种 显 式 类 型 转换 。 最 后 一 行 代码 的 结果 有 些 让 人 意外 。 我 们 将 nul1 和 " "拼接 在 了 
一 起 ， 居 然 没 有 出 错 ? 

那么 , JavaScript 是 怎么 做 类 型 转换 的 ?一 个 抽象 值 是 怎么 变 成 字符 串 、 数字 或 者 布尔 值 的 ? 
其 实 ，JavaScript 在 内 部 是 依靠 tosting() 、toNumber () 和 toBoolean () 方 法 来 实现 这 一 切 的 。 

当 一 个 非 String 类 型 的 值 被 强制 转换 成 String 类 型 时 ， JavaScript 在 内 部 使 用 的 是 tostring () 
方法 。 所 有 的 原始 值 都 有 对 应 的 字符 捉 形式 一 一 null 的 字符 串 形式 是 "nul1" ，undefined 的 字符 串 
形式 是 "undefined"， 等 等 。 对 于 Java 开 发 人 员 而 言 ， 这 就 好 比 是 一 个 拥有 tostring () 方 法 的 
类 ， 该 方法 能 够 返回 类 的 字符 串 描述 。 在 讨论 对 象 的 时 候 ， 我 们 将 会 看 到 这 究竟 是 如 何 实现 的 。 


因此 ， 可 以 实现 类 似 于 下 面 的 操作 : 






























































Var” = abe.s 
console.log(a.length); 
console.log(a.toUpperCase()); 


如 果 在 识 入 这 些 代 码 片 段 时 稍 加 留心 , 你 会 意识 到 一 些 奇 怪 的 地 方 。 我们 怎么 能 在 原始 值 上 
调用 属性 和 方法 呢 ? 原始 值 怎么 会 有 对 象 才 有 的 属性 和 方法 呢 ? 它们 其 实 并 没有 。 

之 前 讨论 过 , JavaScript 软 认 会 很 贴心 地 将 原始 值 包 囊 起 来 形成 包装 对 象 , 这 样 我 们 就 可 以 直 
接 访问 包装 对 象 的 方法 和 属性 ， 就 好 像 这 些 方法 和 属性 是 原始 值 自 带 的 一 样 。 
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当 非 数字 值 需要 被 强制 转换 成 数字 时 , JavaScript 会 在 内 部 使 用 toNumber () 方 法 : true 变 成 
1，undefined 变 成 NaN，false 变 成 0，null 变 成 0。 在 字符 串 上 使 用 toNumber () 时 会 进行 字 
面 上 的 转换 ， 如 果 转 换 失败 ， 则 返回 NaN。 


那么 ， 下 面 这 个 例子 呢 ? 

typeof null ==="object" //true 

null 是 对 象 ? 是 的 ， 这 是 由 于 一 个 历史 悠久 的 bug 导 致 的 。 因 为 这 个 bug， 在 测试 某 个 值 是 否 
为 null 的 时 候 一 定 要 小 心 : 


var RS TL 
if (!x && typeof x === "object")t{ 
console.1log("100% null"); 


} 
对 于 其 他 有 类 型 的 东西 ， 如 函数 呢 ? 


f = function test() { 
return 12; 


} 






























































console.log(typeof f === "function"); // 打 印 "true" 
数组 呢 ? 
console.log(typeof [1.2.3.4]); // "object" 

















它们 铁定 也 是 对 象 ， 本 书 随后 会 详细 地 讨论 函数 和 数组 。 
在 JavaScript 中 ， 值 有 类 型 ， 变 量 没 有 。 由 于 JavaScript 的 动态 性 质 ， 变 量 可 以 随时 保存 任何 
类 型 的 值 。 
JavaScript 并 不 强制 类 型 ,也 就 是 说 语言 本 身 并 不 要 求 变 量 中 值 的 类 型 必须 一 直 和 初始 类 型 相 
变量 中 可 以 保存 字符 串 ， 下 一 次 赋值 时 可 以 保存 数字 ， 等 等 。 


下 

typeof a; // "number" 
a = false; 

typeof a; // "boolean" 


typeof 操 作 符 总 是 返回 String 类 型 : 


typeof typeof 1; // "string" 











同 





O 


1.3.3 自动 插入 分 号 
尽管 JavaScript 的 语法 风格 与 C 类 似 ， 但 它 并 不 强制 要 求 在 源 代 码 中 使 用 分 号 。 


但 这 并 不 是 说 JavaScript 就 不 需要 分 号 ，JavaScript 语 言 解析 器 需要 分 号 来 理解 源 代码 。 因 此 ， 
解析 顺 在 遇 到 由 于 缺失 分 号 而 导致 的 解析 错误 时 会 自动 插入 分 号 。 重 要 的 是 要 注意 , 自动 插入 分 
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号 (automatic semicolon insertion，ASI) 只 在 有 换行 符 的 时 候 才 会 发 生 。 分 号 并 不 会 插入 到 一 行 
代码 的 中 间 。 

基本 上 来 说 ， 如 果 JavaScript 解 析 器 在 解析 某 一 行 的 时 候 出 现 了 解析 错误 〈 丢 失 了 需要 的 分 
号 )， 而 且 可 以 插入 分 号 ， 那 它 就 会 这 么 做 。 揪 入 分 号 的 标准 是 什么 呢 ? 答案 是 : 仅 当 某 些 语 句 
的 结尾 和 换行 符 之 间 只 有 空白 字符 或 注释 的 时 候 ， 才 会 插入 分 号 。 

关于 ASI 有 过 激烈 的 争论 。 无 可 非议 ， 这 个 特性 是 一 个 非常 糟糕 的 设计 选择 。 互 联网 上 曾 进 
行 过 激烈 的 讨论 ， 比 如 https://github.com/twbs/bootstrap/issues/3057 以 及 https://brendaneich.com/ 
2012/04/theinfernal-semicolon/。 

在 辨别 这 些 争论 正确 与 否 之 前 ， 得 先 明 白 ASI 产 生 了 哪些 影响 。 下 面 的 这 些 语 句 会 受到 ASI 
的 影响 : 
口 空 语句 
口 var 语 句 
口 表达 式 语句 
口 do-while 语 句 
口 continue 语 句 
口 break 语 人 句 
口 return 语 句 
口 throw 语 句 


ASI 的 理念 是 使 得 行 尾 的 分 号 成 为 可 选 的 ， 这 样 ，ASI 就 能 够 帮助 解析 器 判断 一 个 语句 什么 
时 候 结束 。 通 常 ， 语 句 以 分 号 作为 结尾 。ASI 规 定 一 个 语句 在 下 列 情况 下 也 可 以 结束 : 


口 行 终结 符 〈 例如 换行 符 ) 之 后 是 一 个 非法 的 词法 单元 (token ) 
口 遇 到 右 大 括号 

口 抵达 文件 尾部 

来 看 下 面 的 例子 : 

if (a < 1) a = 1 console.1log(al) 

出 现在 1 后 面 的 词法 单元 console 是 非法 的 ， 因 此 触发 了 ASI: 

if (a < 1) a = 1; console.log(a); 

在 下 面 的 代码 中 ， 大 括号 中 语句 的 终结 符 不 是 分 号 : 

function add(a,b) { return a+b } 

ASI 会 对 上 面 的 代码 生成 一 个 语法 正确 的 版 本 : 


function add(a,b) { return a+b; } 
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1.3.4 ” ”JavaScript 代码 风格 指南 


每 一 门 编程 语言 都 会 形成 自己 的 一 套 代码 风格 和 结构 。 遗憾 的 是 , 开发 新 手 并 没有 花费 很 多 
精力 学 习 语言 风格 方面 的 细微 差异 。 一 旦 养 成 坏 毛 病 ， 就 很 难 习 得 这 项 技能 了 。 要 想 写 就 优美 、 
易 读 以 及 可 维护 性 高 的 代码 ， 重 要 的 是 要 学 会 正确 的 代码 风格 。 风 格 方面 的 建议 可 谓 层 出 不 穷 ， 
我 们 只 挑选 那些 实用 性 最 强 的 。 我 们 会 在 合适 的 时 候 讨 论 适合 的 风格 。 让 我 们 先 来 确定 风格 方面 
的 一 些 基 本 规则 。 
































尽管 空白 字符 在 JavaScript 中 并 不 重要 , 但 是 正确 使 用 这 些 字符 能 够 提高 代码 的 可 读 性 。 下 面 
的 操作 指南 有 助 于 管理 代码 中 的 空白 字符 。 


D 绝对 不 要 混用 空格 和 制 表 符 。 

D 在 编码 之 前 ， 选 择 到 底 是 使 用 软 缩 进 ( 空格 ) 还 是 真实 的 制 表 符 。 考 虑 到 可 读 性 ， 推 荐 
将 编辑 器 的 缩 进 距离 设置 成 两 个 字符 ， 这 意味 着 两 个 空格 或 是 代表 一 个 真实 的 制 表 符 的 
两 个 空格 。 


口 确保 “显示 隐藏 字符 ”( show invisibles ) 设置 选项 一 直 是 启用 的 。 这 样 做 的 好 处 如 下 : 


和 强制 一 致 性 

ms 消除 行 尾 的 空白 字符 

时 消除 空 行 和 空白 字符 

昌 易于 识别 差异 

自尽 可 能 使 用 EditorConfig ( http://editorconfig.org/ ) 


2. 括号 、 换 行 符 和 大 括号 


在 过 、else 、while 和 try 中 坚持 使 用 空格 和 大 括号 ， 并 将 这 些 语句 分 布 在 多 行 中 。 这 种 风格 提 
倡 的 是 可 读 性 。 来 看 看 下 面 的 代码 : 






































// 拥挤 的 书写 风格 (不 良 ) 


if(condition) doSomeTask(); 
while(condition) i+t+; 
for(var i=0;i<10;i++) iterate(); 
// 利用 空白 字符 提高 可 读 性 (优良 ) 
// 在 领头 的 括号 前 加 上 一 个 空格 
if (condition) { 
// 语句 
} 


while ( condition ) { 
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// 语 身 
} 


fOr Va 0 0 TE ) 
// 语 向 
} 


// 更 好 的 写法 : 


Var i, 
length = 100; 


for (i= 0; i < length; i++ ) { 


Va LT. (SY 0 
length = 100; 


for ( ; i < length; i++ ) { 
// 语句 
} 


var value; 


for ( value in object ) { 
// 语句 
} 


if ( true ) { 
// 语句 

} else { 
// 语 向 

} 


// 没有 在 操作 符 两 边 加 上 空格 
// 不 良 的 写法 


Var XY 


// 优良 的 写法 


Ya Ce 


// 使 用 单个 换行 符 结束 文件 
// 不 良 的 写法 
(function(global) { 

7 i Staff 
(已 二 直 BY 


// 不 良 的 写法 
(function(global) { 
ad se SE Ep 
}) (this) ;al 

d 
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符 ， 


// 优良 的 写法 
(function(global) { 
ES eb lh 

}) (this);d 


3. 引号 





不 管 你 喜欢 单 引 号 还 是 双 引号 都 没关系 ,JavaScript 解 析 器 并 不 会 对 这 两 者 区 别 对 待 。 但 出 于 
一 致 性 的 考虑 ， 切 记 不 要 在 同一 个 项 目 中 混用 这 两 种 引号 ， 请 选择 并 坚持 一 种 风格 。 


4. 行 尾 和 空 行 


空白 字符 会 使 得 代码 的 差异 与 变更 无 法 辨 


你 应 该 使 用 这 项 功能 。 


5. 类 型 检查 


可 以 像 下 面 这 样 检查 变量 的 类 型 : 


//String: 

typeof variable === "string" 
//Number: 

typeof variable === "number" 

//Boolean: 

typeof variable === "boolean" 
//Object: 

typeof variable = 
//null: 
variable === null 
//null 或 undefined: 
variable == null 


6. 类 型 转换 


"opbject" 





在 语句 的 一 开始 就 执行 强制 类 型 转换 : 


// 不 良 


const totalScore = this.reviewScore + 


// 优良 


识 。 很 多 编辑 器 允许 自动 移 除 多 余 的 


vs 
’ 


const totalScore = String(this.reviewScore); 


对 Number 类 型 使 用 parseInt () 的 时 候 ， 总 是 加 入 基数 用 于 类 型 转换 


const inputValue = '4'; 

// 不 良 

const val = new Number (inputValue); 
// 不 良 


const val = +inputValue; 
// 不 良 
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const val = inputValue >> 0; 


// 不 良 

const val = parseInt (inputValue); 
// 优良 

const val = Number (inputValue); 
// 优良 


const val = parseInt (inputValue, 10); 
下 面 的 例子 展示 了 如 何 使 用 Boolean () 进行 类 型 转换 . 


const age = 0; // 不 良 

const hasAge = new Boolean(age); // 优良 
const hasAge = Boolean(age); // 优良 
const hasAge = !!age; 


7. 条 件 求 值 
JavaScript 中 有 各 种 各 样 关于 条 件 语句 的 风格 指南 。 来 研究 一 下 下 面 的 代码 : 
// 当 数 组 长 度 不 为 空 时 ， 


// 不 良 写法 : 
if ( array.length > 0 ) 








// 测试 逻辑 真 (优良 的 写法 ) 
if ( array.length ) 


// 当 数 组 长 度 为 空 时 ， 
// 不 良 写法 : 
if ( array.length === 0 ) 


// 测试 逻辑 真 (优良 的 写法 ) : 
if ( !array.length ) 


// 检查 字符 串 是 否 为 空 时 ， 
// 不 良 写法 : 
ff try ae J) 


// 测试 远 辑 真 (优良 的 写法 ) 
if ( string ) 


// 检查 字符 囊 是 否 为 空 时 ， 
// 不 良 写法 : 
if ( string === "" ) 


// 测试 逻辑 假 (优良 的 写法 ) : 
i oy a le Ea, 

// 检查 引用 是 否 有 效 时 ， 

// 不 良 写法 : 


Tf EO .Sse tue .) 


// 优良 的 写法 : 
Lf. (Fo. 
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// 检查 引用 是 否 无 效 时 ， 
// 不 良 写法 : 
1f NC FO0 三 ESG 


// 优良 的 写法 : 
if ( !foo ) 


// 这 样 写 的话 ，0、""、null、undefined、NaN 也 能 够 满足 条 件 
// 如 果 你 必须 针对 false 测 试 ， 可 以 使 用 : 


if ( foo === false ) 

// 引用 可 能 会 是 null 或 undefined, 但 绝 不 会 是 false、"" 或 0， 
// 不 良 写法 : 

if ( foo === null || foo === undefined ) 

// 优良 的 写法 : 

Ef (foo Ss DLL ) 





// 别 把 事情 复杂 化 
eturn 贡生 二 三才 2 "SUunday EL 2 "MonNnday "Tuesday 


// 这 样 写 更 好 : 


EE (站 二 三 记过 
return 'Sunday'; 
RE A 
return 'Monday'; 
} else { 


return 'Tuesday'; 


} 


// 锦上添花 的 写法 : 
SWiteh (yt 


case 0: 

return 'Sunday'; 
case 1: 

return 'Monday'; 
default: 


return 'Tuesday'; 


} 
8. 命名 


命名 极为 重要 。 我 打包 票 你 肯定 而 
看 下 面 这 些 代 码 : 


// 别 用 单个 字母 命名 。 使 用 描述 性 的 名 字 
// 差劲 的 命名 
funet Lon. (Yt 


} 





// 不 错 的 命名 
function query() { 
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} 


// 对 于 对 象 、 函 数 和 实例 ， 使 用 驼峰 命名 法 


// 差劲 的 命名 

const, OBE = {0} 
const this_is_object = 
function c() {} 


// 不 错 的 命名 
const thisIsObject = { 


{让 3 


}: 


function thisIsFunction() 


{} 


// 对 于 构造 函数 和 类 ， 使 用 Pascal 命 名 法 


// 差劲 的 命名 


function uset (options) 





{ 


this.name = options.name; 


} 


const bad = new user({ 
name: 'nope', 


总 


// 不 错 的 命名 
class User { 
constructor (options) 


{ 


this.name = options.name; 


} 

} 

const good = new User!( 
name: 'yup', 


3 


{ 


// 命名 私有 属性 的 时 候 ， 在 名 字 前 面 加 上 下 划 线 _ 


// 差劲 的 命名 


this. firstName = 'Panda'; 


this.firstName = 'Pan 


// 不 错 的 命名 
this._firstName = 'Pan 


9. 邪恶 的 eval () 


da 


da'; 


作为 JavaScript 中 被 误 用 的 最 为 严重 的 方法 之 一 ，eval () 方 法 可 以 接受 一 个 包含 JavaScript 代 
码 的 字符 串 ， 然 后 编译 并 执行 。eval () 仅 适 合 在 少数 情况 下 使 用 ， 比 如 基于 用 户 输入 来 构建 表 








大 多 数 情况 下 ,使 用 eval () 的 原因 仅仅 是 因为 它 能 把 活 儿 给 干 了 。eval () 方 法 的 技巧 性 太 


强 , 会 使 得 代码 不 可 预测 。 它 








5 


运行 


速度 缓慢 、 难 以 处 到 





,如果 你 不 小 心 犯错 , 往往 还 会 加 重 损害 。 





如 果 考 虑 使 用 eval ( ) 的 话 ， 那 么 也 许 会 有 其 他 更 好 的 解决 方法 。 
下 面 的 代码 片段 展示 了 eval () 的 用 法 : 
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console.log(typeof eval (new String("1+1"))); // "object" 
console.log(eval (new String("1+1"))); //1+1 
console.log(eval ("1+1")); Fa A 
console.log(typeof eval("l1+1")); // 返回 "number" 

Var expression = new String("1+1"); 

console.logl(eval (expression.toString())); X22 

我 不 打算 再 展示 eval () 的 更 多 用 法 ， 这 个 方法 不 鼓励 使 用 ， 离 它 远 点 。 
10. 严格 模式 





ECMAScript 5 中 的 严格 模式 ( strict mode ) 能 够 产生 更 清晰 的 代码 ， 该 模式 减少 了 一 些 不 安 
全 的 特性 ,增加 了 更 多 的 警告 信息 ,代码 行为 也 更 符合 逻辑 。 普 通 ( 非 严 格 ) 模式 也 叫 作 懒散 模 
式 (sloppy mode )。 严 格 模式 能 够 帮助 你 避免 一 些 不 够 细致 的 编程 实践 。 如 果 刚 入 手 一 个 新 的 
JavaScript 项 目 ， 强 烈 建议 一 开始 就 使 用 严格 模式 。 

可 以 先 在 JavaScript 文 件 或 <script > 元素 中 输入 下 面 的 一 行 代码 来 进入 严格 模式 : 

'use strict'; 

注意 ， 不 文 持 ECMAScript 5 的 JavaScript 引 擎 会 简单 地 忽略 上 面 的 语句 ， 继 续 在 非 严 格 模式 
下 运行 。 


如 果 想 以 函数 为 单位 启用 严格 模式 ， 可 以 像 下 面 这 样 做 : 








function foo() { 
'use strict'; 


} 
当 处 理 那些 可 能 无 法 在 严格 模式 下 运行 的 遗留 代码 的 时 候 ， 这 么 做 非常 方便 。 


如 果 使 用 了 已 有 的 遗留 代码 , 一定 要 小 心 ,因为 严格 模式 在 这 种 情况 下 会 造成 麻烦 。 对 此 有 
一 些 注意 事项 。 








(D 对 已 有 的 代码 启用 严格 模式 会 出 问题 


代码 有 可 能 会 依赖 于 某 个 已 经 不 再 可 用 的 特性 , 或 是 某 种 在 懒散 模式 和 严格 模式 中 存在 差异 
的 行为 。 别 忘 了 可 以 在 处 于 懒散 模式 的 JavaScript 文 件 中 加 入 一 个 处 于 严格 模式 的 函数 。 


(2) 谨慎 打包 

当 合 并 或 压缩 JavaScript 文 件 时 , 要 注意 严格 模式 并 不 会 在 预期 的 位 置 上 打开 或 关闭 , 这 会 导 
致 代码 出 问题 。 

接 下 来 将 更 为 详细 地 解释 严格 模式 的 一 些 特性 。 这些 特性 通常 并 不 需要 了 解 ， 因 为 在 你 进行 
不 当 操作 的 时 候 ， 基 本 上 都 会 收 到 警告 信息 。 
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(3) 严格 模式 中 的 变量 必须 声明 


在 严格 模式 中 ,所 有 的 变量 必须 明确 声明 ,这 有 助 于 避免 输入 错误 。 在 懒散 模式 中 ， 对 未 声 
明 的 变量 赋值 会 生成 一 个 全 局 变量 : 





function sloppyFunc() { 
sloppyVar = 123; 
} 
sloppyFunc (); // 创建 全 局 变量 sloppyVar 
console.log(sloppyVar); // 123 


在 严格 模式 中 ， 对 未 声明 的 变量 赋值 会 抛 出 异常 : 





function strictFunc() { 
'use strict'; 
StriotVar se: L233 

} 


strictFunc(); //ReferenceError: strictVar is not defined 
(4) 严格 模式 中 的 eval () 函数 行为 更 清晰 


在 严格 模式 中 , eval () 函数 的 行为 变 得 不 再 那么 古怪 : 在 被 求 值 的 字符 串 (evaluated string ) 
中 声明 的 变量 ， 不 会 被 添加 到 eval ( ) 的 外 围 作用 域 中 。 


(5) 严格 模式 中 被 禁止 的 特性 
严格 模式 中 不 允许 使 用 with 语句 〈 随后 将 会 讨论 该 语句 )。 你 会 在 编译 时 ( 载 入 代码 的 时 候 ) 


得 到 一 个 语法 错误 。 
在 懒散 模式 中 ， 前 面 带 有 0 的 数字 被 认为 是 八进制 ( 基数 为 8 ): 
> 010 === 8 true 


在 严格 模式 中 ， 如 果 使 用 这 种 形式 的 字面 量 写法 ,会 导致 语法 错误 : 























function f() { 
'use strict'; 
return 010 

} 


//SyntaxError: Octal literals are not allowed in 


11. 运行 JSHint 




















JSHint 是 一 个 能 够 标记 出 JavaScript 程 序 中 可 疑 用 法 的 工具 ， 其 核心 是 由 一 个 库 和 一 个 作为 
Node 模 块 分 发 的 命令 行 界面 ( command line interface，CLI ) 程序 组 成 的 。 


如 果 安 装 过 Node.js， 就 可 以 像 下 面 这 样 使 用 nom 来 安装 JSHint: 


npm install jshint -g 
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安装 好 JSHint 之 后 ,就 可 以 用 它 来 检查 一 个 或 多 个 JavaScript 文 件 了 。 将 下 面 的 代码 片段 保存 
为 test.js 文 件 : 


function f(condition) { 
switch (condition) { 
case 1: 
console.1og(1); 
case 2: 
console.1o0g(1); 
} 
} 


当 使 用 JSHint 运 行 该 文件 时 , 它 会 发 出 警告 , 告诉 我 们 switch 的 case 分 支 中 丢失 了 break 语 句 : 


>jshint test.js 
test.js: line 4, 
1 error 


可 以 对 JSHint 进 行 配置 以 符合 个 人 需要 。 请 参阅 相应 的 文档 ( http://jshint.conydocs/ ) 来 了 解 
如 何 根据 项 目 实际 需求 定制 JSHint。 我 个 人 广泛 地 使 用 了 JSHint， 建 议 你 也 开始 使 用 它 。 你 会 惊 
讶 于 这 么 一 个 简单 的 工具 竞 然 能 修复 如 此 多 的 隐藏 00g 以 及 代码 风格 问题 。 


Col 19, Expected a 'break' statement before 'case'. 




















你 可 以 在 项 目的 根 目录 中 运行 JSHint 来 检查 整个 项 目 。 可 以 将 JSHint 指 令 放 入 .jshinrc 文 件 中 。 
该 文件 的 格式 类 似 于 下 面 这 样 : 


{ 





false, 
"expr": true, 
"Joopfunc": true, 
false, 
true, 


rasi": 


PURly 
EYL 
"white": true, 
"undef": true, 
"indent": 4 


1.4 小结 


本 章 , 我 们 学 习 了 JavaScript 语 法 、 类 型 以 及 代码 风格 方面 的 基础 知识 。 本 章 特 意 没 有 讨论 也 
变量 作用 域 以 及 闭 包 等 重要 话题 ， 因 为 后 面 会 用 专门 的 章节 进行 介绍 。 相 信 本 章 帮 你 理解 了 
接 下 来 就 要 学 习 如 何 编写 具有 专业 水 准 的 





JavaScript 中 的 一 些 主要 概念 。 掌 握 了 这 些 基础 知识 ， 
JavaScript 代 码 了 。 
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限 数 、 


闭 包 与 模块 











上 一 章 特意 没有 对 JavaScript 的 某 些 方面 展开 讨论 。JavaScript 的 强大 与 优雅 源 于 这 门 语言 的 
一 些 特 性 。 如 果 你 是 一 名 中 高 级 JavaScript 开 发 人 员 ， 会 积极 地 使 用 对 象 和 函数 。 但 在 很 多 时 候 ， 
那些 尚 在 入 门 级 别 中 咒 的 开发 人 员 会 对 JavaScript 的 核心 构件 形成 一 种 似是而非 甚至 错误 的 理解 。 
很 多 程序 员 由 于 不 能 很 好 地 掌握 JavaScript 中 函数 方面 的 知识 ,因此 对 于 闭 包 的 概念 理解 得 很 不 到 
位 。 在 JavaScript 中 ， 对象、 函数 和 闭 包 之 间 存 在 着 紧密 的 联系 ,而 理解 这 种 联系 能 够 极 大 地 增强 





你 的 JavaScript 编 程 技艺 ， 为 开发 各 种 应 用 程序 打下 坚实 的 基础 。 

















JavaScript 离 不 开 函 数 。 理 解 了 本 数 , 就 意 


味 着 你 的 兵器 库 中 多 了 一 件 最 有 力 的 武器 。 有 关 函 
































数 最 重要 的 一 点 就 是 : 在 JavaScript 中 ， 函 数 是 头等 对 象 (first-class object )， 其 处 理 方式 与 其 他 
JavaScript 对 象 无 异 。 和 其 他 JavaScript 数 据 类 型 一 样 ， 函 数 可 以 被 变量 引用 ， 可 以 使 用 字面 形式 


声明 ， 甚 至 可 以 作为 函数 参数 传递 。 
如 同 JavaScript 中 的 其 他 对 象 ， 函 数 可 以 : 
D 通过 字面 形式 创建 





口 可 以 作为 函数 参数 传递 
口 可 以 作为 函数 值 返 回 
口 可 以 拥有 能 动态 创建 和 赋值 的 属性 

















口 可 以 赋值 给 变量 、 数 组 元 素 以 及 其 他 对 和 象 的 属 





型 
旦 





在 本 章 以 及 其 他 章节 中 ， 将 对 JavaScript 函 数 的 这 些 独特 功能 进行 曾 述 。 


2.1 函数 的 字面 形式 


作为 主要 执行 单元 的 函数 , 是 JavaScript 中 
数 ， 进 而 为 程序 添加 上 结构 。 























最 重要 的 概念 之 一 。 你 可 以 把 代码 放 在 一 起 形成 隐 














JavaScript 隙 数 可 以 使 用 函数 的 字面 形式 来 声明 。 





函数 的 字面 形式 由 四 部 分 组 成 : 
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口 function 关 键 字 

口 可 选 的 函数 名 称 ， 如 果 指 定 的 话 ， 这 个 名 称 必须 是 一 个 有 效 的 JavaScript 标 识 符 
口 放 在 括号 中 的 参数 名 列表 。 就 算 没 有 参数 ， 也 得 给 出 一 个 空 括号 

口 函数 体 是 包含 在 大 括号 中 的 一 系列 JavaScript 语 句 


























函数 声明 
下 面 这 个 非常 简单 的 例子 演示 了 一 个 函数 声明 的 所 有 组 成 部 分 : 


function add(a,b)t{ 
return a+b; 
} 
“dd(L 2 
console.log(c); // 打印 出 3 
函数 声明 以 关键 字 function 开 头 ， 后 面 是 函数 名 称 。 函 数 名称 是 可 选 的 。 如 果 省 略 了 函数 
名 , 该 函数 就 称 为 匿名 函 数 。 随后 会 介绍 匿名 函数 的 用 法 。 第 三 部 分 是 包含 在 括号 中 的 函数 参数 ， 
参数 名 之 间 用 逗号 分 隔 。 这 些 参数 被 作为 函数 内 部 定义 的 变量 ， 其 初始 值 并 非 undefined ， 而 是 在 
调用 函数 时 所 提供 的 参数 值 。 第 四 部 分 是 大 括号 中 的 一 组 语句 ， 这 些 语句 就 是 函数 体 , 在 函数 被 
调用 时 执行 。 


这 种 声明 函数 的 方法 也 叫 作 函数 语句 ( function statement )。 使 用 这 种 方法 声明 函数 时 ， 函 数 
的 内 容 会 被 编译 并 创建 出 一 个 与 函数 同名 的 对 象 。 


也 可 以 利用 函数 表达 式 ( function expression ) 来 声明 函数 : 
























































var add = function(a,b)t{ 
return a+b; 

} 

Gd 

console.log(c); // 打 印 出 3 


在 这 里 ， 我 们 创建 了 一 个 匿名 函数 并 将 其 赋 给 变量 aaa， 该 变量 随后 可 用 于 调用 函数 。 使 用 
函数 表达 式 声 明 的 问题 在 于 无 法 递归 调用 这 种 函数 。 递归 是 一 种 优雅 的 编码 方式 ,可 以 使 函数 调 
用 自身 。 解 决 这 种 限制 的 方法 是 采用 具名 函数 表达 式 ( named function expression )。 举 例 来 说 ， 
下 面 的 函数 可 用 于 计算 给 定数 值 n 的 阶乘 : 

var facto = function factorial(n) { 

to 妥 三 1 
return 1; 
return n * factorial(n - 1); 


} 
console.log(facto(3)); // 打 印 出 6 


在 本 例 中 ,我们 并 没有 创建 匿名 函数 ， 而 是 创建 了 一 个 具名 函数 。 因 为 函数 有 了 了 名称， 所 以 
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自然 就 可 以 递归 地 调用 自身 了 。 
最 后 , 还 可 以 创建 调用 自身 的 函数 表达 式 (self-invoking function expression, 稍 后 将 会 讨论 ): 











(function sayHello() { 
console.log("hello!"); 
}) (); 


定义 完成 , 就 可 以 在 其 他 的 JavaScript 函 数 中 调用 该 函数 了 。 苑 数 执行 完毕 后 , 调用 方 ( 执行 
被 调用 函数 ) 继续 往 下 执行 。 也 可 以 将 函数 作为 参数 传递 给 另 一 个 函数 : 














function changeCase(val) { 
return val.toUpperCase();} 


和 
function demofunc(a, passfunction) { 
console.log(passfunction(a)); 


} 


demofunc("smallcase", changeCase); 

在 上 面 的 例子 中 ， 调 用 函数 aemoFunc () 时 使 用 了 两 个 参数 。 第 一 个 参数 是 要 转换 成 大 写 的 
字符 串 ， 第 二 个 参数 是 对 函数 changecase() 的 引用 。 在 demoFunc() 中， 是 通过 传递 给 
passfunction 参 数 的 引用 来 调用 changecase () 函数 的 。 这 里 ， 将 一 个 函数 引用 作为 参数 传递 
给 了 另 一 个 函数 。 后 面 学 习 回 调 函 数 的 时 候 ， 将 详细 地 讲述 这 种 功能 强大 的 概念 。 


函数 可 以 返回 值 ， 也 可 以 不 返回 值 。 在 之 前 的 例子 中 ， 函 数 add 向 调用 者 返回 了 一 个 值 。 除 
了 在 函数 结尾 处 返回 值 之 外 ， 显 式 地 调用 return 还 可 以 有 条 件 地 从 函数 中 返回 : 





























Var looper = function(x){ 
1 (SOs=0) 光 
return; 


} 
console.1log (x) 

} 

for(var i=1;i<10;i++)f{ 
looper ( 工 ) ; 


} 
这 段 代码 会 打印 出 1、2、3、4、6、7、8、9,， 但 不 包括 5。 当 if (x%5===0) 为 真 时 ， 代 码 
会 从 函数 返回 ， 不 再 执行 余下 的 语句 。 


























2.2 ”函数 作为 数据 
在 JavaScript 中 ,函数 可 以 赋 给 变量 , 变量 被 视 为 数据 。 你 很 快 就 会 看 到 这 种 概念 的 强大 之 处 。 
来 看 下 面 的 例子 : 


Var Say = console.l1og; 
say ("I can also say things"); 
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在 上 面 的 例子 中 , 将 熟悉 的 console.1og() 函数 赋 给 了 变量 say。 任何 函数 都 可 以 像 这 样 赋 
给 变量 。 在 变量 后 加 上 括号 就 可 以 调用 对 应 的 函数 。 此 外 , 还 可 以 将 函数 作为 参数 传人 别 的 函数 。 
仔细 研究 下 面 的 例子 ， 并 在 JS Bin 中 输入 代码 : 


var validateDataForAge = function(data) { 
person = data(); 
console.log (person); 
if (person.age <1 || person.age > 99){ 
return true; 


}elsel{ 
return false; 





} 
}; 


Var errorHandlerForAge = function(error) { 
console.1log("Error while processing age"); 
让 


function parseRequest (data,validateData,errorHandler) { 
Var error = validateData (data); 
Lf (VErOE), 还 
console.log("no errors"); 
} else { 
errorHandler (); 
} 
} 


Var generateDataForScientist = function() { 
return { 
name: "Albert Einstein", 
age : Math.floor(Math.random() * (100 - 1)) + 1, 
ye 
jy 


Var generateDataForComposer = function() { 
return { 
name: "JS Bach", 
age : Math.floor(Math.random() * (100 - 1)) + 1， 
3 
}; 


// 解 析 请 求 

parseRequest (generateDataForScientist, validateDataForAge, 
errorHandlerForAge); 

parseRequest (generateDataForComposer, validateDataForAge, 
errorHandlerForAge); 


在 这 个 例子 中 ， 也 数 作为 参数 传 给 了 parseRequest () 函数 。 在 两 次 不 同 的 调用 中 ， 
generateDataForScientist 和 generateDataForComposers 先 后 作为 不 同 的 参数 被 传 入 ， 
另外 两 个 函数 参数 则 保持 不 变 。 我 们 定义 了 一 个 通用 的 parseRequest (), 它 接受 三 个 函数 作为 
参数 ， 负 责 将 特定 的 部 分 组 合 在 一 起 : 数据 、 验 证 器 (validator ) 和 错误 处 理 程序 。 可 以 对 
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parseRequest () 函数 进行 扩展 和 定制 , 同时 ， 因 为 每 次 发 起 请 求 的 时 候 都 要 调用 该 函数 ， 所 以 
可 以 作为 一 个 清晰 的 调试 点 ( debugging point )。 我 确信 你 已 经 开始 认识 到 JavaScript 函 数 所 提供 
的 强大 功能 





2.3 作用 域 


对 于 初学 者 而 言 ，JavaScript 的 作用 域 有 点 让 人 困惑 。 其 概念 看 起 来 很 直观 , 但 实际 上 并 非 如 
此 。 要 想 掌握 作用 域 的 概念 ， 必 须 理 解 其 中 一 些 重要 的 细微 之 处 。 什 么 是 作用 域 ? 在 JavaScript 
中 ， 作 用 域 指 的 是 代码 当前 的 上 下 文 。 


一 个 变量 的 作用 域 就 是 该 变量 所 在 的 上 下 文 。 作 用 域 指明 了 可 以 从 哪里 访问 到 某 个 变量 ,以 
及 在 该 上 下 文中 是 否 可 以 访问 这 个 变量 。 作 用 域 分 为 全 局 作用 域 和 局 部 作用 域 。 

















2.3.1 全 局 作用 域 


声明 的 所 有 变量 默认 都 是 定义 在 全 局 作用 域 中 , 这 是 JavaScript 最 恼人 的 设计 决定 之 一 。 因 为 
全 局 变量 在 所 有 的 作用 域 中 都 是 可 见 的 , 所 以 在 任何 作用 域 中 都 可 以 修改 全 局 变量 。 全 局 变量 导 
致 很 难 在 同一 个 程序 /模块 中 运行 松 看 合 的 子 程序 。 如 果子 程序 碰巧 也 使 用 了 同名 的 全 局 变量 ， 
就 会 造成 干扰 并 有 可 能 导致 程序 运行 失败 , 而 此 类 故障 通常 很 难 排 查 。 这 种 现象 有 时 被 称 为 命名 
空间 冲突 ( namespace clash )。 上 一 章 中 讨论 过 全 局 作用 域 ， 现 在 来 简单 地 回顾 一 下 ， 搞 明白 如 
何以 最 佳 方式 避免 此 类 问题 。 


可 以 采用 两 种 方式 创建 全 局 变量 。 


口 第 一 种 方法 是 在 所 有 函数 外 部 使 用 var 语 句 。 在 函数 外 部 声明 的 变量 都 属于 全 局 作用 域 。 
口 第 二 种 方法 是 在 声明 变量 的 时 候 忽 略 var 语 句 (也 称 为 隐 式 全 局 变量 )。 我 觉得 这 种 设计 是 
为 了 给 新 手提 供 方便 ， 结 果 却 是 一 场 置 梦 。 即 便 是 在 函数 内 部 ， 如 果 在 声明 变量 的 时 候 
忽略 了 var， 默 认 也 是 在 全 局 作用 域 中 创建 变量 。 这 就 很 不 妙 了 。 应 该 坚持 对 程序 使 用 
ESLint 或 JSHint， 让 它们 帮 你 找 出 这 种 不 当 的 地 方 。 下 面 的 例子 展示 了 全 局 作用 域 的 表现 
方式 : 










































































































































































// 全 局 作用 域 

和 -向 二 多 

function scopeTest() { 
console.1o0g(a); 

} 

scopeTest (); // 打 印 出 1 


在 本 例 中 ， 我 们 在 函数 外 部 的 全 局 作用 域 中 声明 了 一 个 变量 。 在 函数 scopeTest () 中 可 以 
使 用 该 变量 。 如 果 在 这 个 函数 的 作用 域 (局 部 作用 域 ) 中 给 全 局 变量 赋 一 个 新 值 , 那么 全 局 作用 
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域 中 该 变量 的 原始 值 就 会 被 覆盖 
// 全 局 作用 域 


Va GV 二 

function scopeTest() { 
a = 2; // 忽 略 了 var， 全 局 变量 被 覆盖 
console.1o0g(a); 

} 

console.log(a); // 打 印 出 1 

scopeTest (); // 打 印 出 2 

console.1log(a); // 打 印 出 2 (全 局 变量 的 值 被 重 写 ) 





2.3.2 ”局 部 作用 域 


i RB SD A oS i 函数 作用 
域 。 在 函数 中 声明 的 变量 是 局 部 变量 ， 只 能 够 在 该 函数 中 或 是 由 该 ee 


Var scope_ name = "Global"; 
function showScopeName () { 

// 局 部 变量 ， 只 能 在 本 函数 中 访问 

Var Scope_name = "Local"; 

console.log (scope_name); // 打印 出 Local 
} 
console.log (scope_name); // 打印 出 Global 
showScopeName (); // 打印 出 Local 


2.3.3 ”函数 作用 域 与 块 作用 域 


JavaScript 变 量 以 函数 作为 其 作用 域 。 可 以 将 函数 作用 域 想 象 成 一 个 气泡 , 它 使 得 气泡 内 部 的 
变量 不 会 被 外 部 所 看 到 。 函 数 为 在 其 内 部 声明 的 变量 创建 了 一 个 这 样 的 气泡 。 你 可 以 像 下 面 这 样 
将 气泡 可 视 化 : 


-GLOBAL SCOPE----------- 
Var g =0; 
funetion, £660(8) (TS 
VAr 和 SE Ly 
//code 
function bar() { ------ | 
ff Ae |ScopeBar ScopeFoo 





























foo () ; //WORKS 
bar(); //FAILS 


JavaScript 使 用 作用 域 链 来 建立 某 个 函数 的 作用 域 。 通常 只 有 一 个 全 局 作用 域 , 每 个 函数 在 其 
中 有 自己 的 嵌 套 作用 域 。 在 函数 内 部 定义 的 函数 也 有 局 部 作用 域 , 该 作用 域 与 外 于 函数 的 作用 域 
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是 链接 在 一 起 的 。 函 数 在 作用 域 链 中 的 位 置 与 其 出 现在 源 代 码 中 的 位 置 是 一 致 的 。 在 解析 一 个 变 
量 时 ，JavaScript 从 最 内 的 作用 域 开始 向 外 搜索 。 记 住 这 一 点 ， 接 着 来 看 看 JavaScript 中 的 各 种 作 
用 域 规则 。 


在 刚才 那个 粗糙 的 示意 图 中 ,可 以 看 到 函数 foo () 定义 在 全 局 作用 域 中 。 该 函数 具有 自己 的 
局 部 作用 域 ， 能 够 访问 变量 gs， 因为 这 个 变量 处 于 全 局 作用 域 中 。 变 量 a、b 、c 是 在 函数 foo () 
的 作用 域 中 定义 的 ， 在 该 局 部 作用 域 中 都 可 以 使 用 。 函 数 bar () 也 是 一 样 。 一 旦 超出 了 foo () 的 
函数 作用 域 ， 就 无 法 再 使 用 函数 par () 了 。 在 函数 foo () (作用 域 气泡 ) 的 外 部 ， 既 看 不 到 也 无 
法 调用 函数 par () 。 


函数 bar () 现在 也 有 了 自己 的 函数 作用 域 气泡 ), 这 里 面 都 有 些 什么 ? 它 可 以 访问 函数 foo () 
以 及 在 foo () 的 父 作用 域 中 创建 的 所 有 变量 : a、b 和 c。 它 还 可 以 访问 全 局 变量 g。 


这 是 一 个 强 有 力 的 概念 。 花 点 时 间 思 考 一 下 。 我 们 刚刚 讨论 过 JavaScript 中 的 全 局 作用 域 有 多 
么 肆 无 忌 悦 、 难 以 控制 ,那么 把 一 部 分 代码 放 进 函数 里 怎么 样 ? 我 们 可 以 把 这 部 分 代码 隐藏 起 来 ， 
并 为 其 创建 一 个 作用 域 气 泡 。 利用 也 数 建立 作用 域 有 助 于 编写 出 正确 的 代码 , 避免 出 现 难以 察觉 
的 错误 。 


函数 作用 域 以 及 在 该 作用 域 中 隐藏 变量 和 其 他 函数 的 男 一 个 优势 在 于 , 能 够 避免 标识 符 之 间 
的 冲突 。 下 面 的 例子 展示 了 这 样 的 问题 : 



























































function foo() { 
function par(a) { 
i = 2; // 在 for 息 环 的 封闭 作用 域 中 修改 i 
console.1log(a+i); 
} 
for (var i=0; i<10; i++) { 
bar(i); // 死 循环 
} 
} 


foo(); 


在 bar () 函数 中 , 我们 不 小 心 修改 了 i 的 值 。 当 在 for 循 环 中 调用 bar () 时 ,变量 i 的 值 被 设置 
成 了 2， 因 此 再 也 跳 不 出 这 个 无 限 循 环 了 。 这 就 是 命名 空间 冲突 的 一 个 反面 例子 。 


迄今 为 止 ,利用 函数 作为 作用 域 在 JavaScript 中 实现 模块 化 和 正确 性 ,看 起 来 是 个 不 错 的 方法 。 
咽 ， 尽管 这 种 方法 的 确 管用 , 但 还 算 不 上 理想 。 第 一 个 问题 是 必须 得 创建 具名 函数 。 如 果 创 建 这 
种 函数 仅仅 是 为 了 产生 函数 作用 域 , 那么 就 会 造成 全 局 作用 域 或 父 作 用 域 的 污染 。 另 外 , 我 们 还 
得 不 停 地 调用 这 些 函 数 。 由 此 所 引入 的 大 量 的 编写 套路 会 使 得 代码 的 可 读 性 越 来 越 差 : 




































































志明 全 省 二 
// 引入 函数 作用 域 
// 1. 在 全 局 作用 域 中 添加 具名 函数 foo () 
function foo() { 
Var a = 2; 
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console.log( a ); // 2 
} 
// 2. 调用 具名 函数 foo () 
foo(); 
console.log( a ); // 1 


我 们 通过 创建 一 个 新 函数 foo () , 在 全 局 作用 域 中 生成 了 函数 作用 域 , 并 在 随后 调用 该 函数 ， | 


执行 相应 的 代码 。 
在 JavaScript 中 ,可 以 创建 能 够 立即 执行 的 函数 来 解决 这 些 问 题 ,仔细 研究 并 输入 下 面 的 代码 : 
> 号 二 光 


// 引入 函数 作用 域 
// 1. 向 全 局 作用 域 中 添加 有 具名 涵 数 f00 () 
(function foo() { 

var a = 2; 


console.log( a ); // 2 
}) (); //<--- 该 函数 立即 执行 
console.log( a ); // 1 








， 被 包含 在 内 的 函数 语句 是 以 function 开 头 的 。 这 表明 该 函数 并 不 是 一 个 标准 的 函数 
和 3 


作为 表达 式 ，(function foo( 语句 意味 着 标识 符 foo 只 能 在 函数 foo () 的 作用 域 中 
使 用 ， 无 法 用 在 外 围 作用 域 中 。 人 这 样 做 的 
益处 多 多 。 我 们 可 以 在 函数 表达 式 之 后 加 上 () 来 立即 执行 它 。 完 整 的 使 用 模式 如 下 : 


(function foo(){ /* 代码 */ })(); 














这 种 模式 很 常见 ， 叫 作 IIFE ( Immediately Invoked Function Expression ， 立 即 调用 的 函数 表达 
式 )。 一些 程序 员 在 使 用 IIFE 时 会 省 去 函数 名 。IIFE 的 主要 用 法 是 引入 函数 作用 域 , 其 实 并 不 需要 
给 函数 命名 。 把 之 前 的 例子 改写 如 下 : 


人 
(function() { 
var a = 2; 
console.log( a ); // 2 
}) (); 
console.log( a ); // 1 
我 们 以 IFE 的 形式 创建 了 一 个 匿名 函数 。 尽 管 和 之 前 的 具名 IEFE 在 效果 上 是 一 样 的 ， 但 是 匿 
名 IIFE 还 是 有 一 些 缺 点 。 


口 因为 在 栈 跟踪 ( stack trace ) 过 程 中 无 法 看 到 函数 名 ， 所 以 很 难 对 这 种 代码 进行 调试 。 
口 无 法 对 匿名 函数 使 用 递归 (之 前 讨论 过 )。 
口 过 多 地 使 用 匿名 IFE 有 时 会 使 得 代码 难以 阅读 。 


Douglas Crockford 和 其 他 一 些 专家 提出 了 一 种 形式 略 异 的 IIFE: 
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(functiom()(/* 并 码 /小 () 3s 
这 两 种 IFE 形 式 都 很 常见 ， 你 会 在 很 多 代码 中 碰 到 。 
IFE 也 能 接受 参数 。 下 面 的 例子 展示 了 如 何 向 IEFE 传 递 参数 : 





(function foo(b) { 
Var a. S27 
console.log( a + b ); 
}) (3); // 打印 出 5 


2.3.4 行内 函数 表达 式 


行内 函数 表达 式 ( inline function expression ) 还 有 另外 一 种 流行 的 用 法 。 在 这 种 用 法 中 ， 郴 
数 作为 其 他 函数 的 参数 : 


function setActiveTab(activeTabHandler, tab)f{ 
// 设置 活动 标签 
// 调用 处 理 函 数 
activeTabHandler (); 
} 
setActiveTab( function (){ 
console.log( "Setting active tab" ); 
}7 1 
// 打印 出 Setting active tab 


你 也 可 以 给 行内 函数 表达 式 取 一 个 名 字 ， 以 便 在 调试 代码 时 能 够 进行 正确 的 栈 跟踪 。 





2.3.5” 块 作用 域 


之 前 讲 过 ，JavaScript 并 没有 块 作用 域 的 概念 。 熟 悉 其 他 语言 ( 如 Java 或 C ) 的 程序 员 会 觉得 
很 不 适应 。ECMAScript 6 (ES6 ) 引入 了 关键 字 1et ， 可 以 用 于 生成 传统 的 块 作用 域 。 如 果 你 确 
定 所 使 用 的 环境 支持 ES6， 那 么 这 就 是 一 个 极为 方便 的 特性 ， 你 应 该 总 是 使 用 1et。 请 看 下 面 的 


代码 : 


War fo = 
EOO). 
let bar = 42; // bar 是 该 代码 块 的 局 部 变量 
console.log( bar ); 


} 


console.log( bar ); // ReferenceError 
但 就 目前 而 言 ， 大 多 数 主流 浏览 器 默认 并 不 支持 ES6。 


到 现在 为 止 , 你 应 该 对 JavaScript 中 作用 域 的 工作 方式 有 了 比较 清晰 的 理解 。 如 果 还 是 不 太 清 
， 我 建议 你 先 停 下 来 ,重新 看 看 本 章 前 面 几 节 内 容 。 在 互联 网 上 搜索 一 下 你 不 了 解 的 地 方 , 或 
ek Overflow 上 。 简 而 言 之 ,一定 要 确保 自己 搞 明 白 了 作用 域 规则 。 
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我 们 很 自然 地 认为 代码 是 从 上 到 下 一 行 接 一 行 地 执行 的 .大 多 数 JavaScript 代 码 也 的 确 是 这 样 
执行 的 ， 但 是 也 有 一 些 例外 。 


考虑 下 面 的 代码 : 


console.10g(a); 
War “a 3 


如 果 你 认为 这 是 一 段 不 合法 的 代码 ， 在 调用 console.1og() 的 时 候 会 输出 undefined， 你 完 
全 正确 。 但 如 果 是 下 面 这 样 呢 ? 
3 


Var a; 
console.log( a ); 


上 面 这 段 代码 会 输出 什么 结果 ?鉴于 语句 var a 出 现在 a = 1 之 后 ， 那 么 变量 a 会 被 重新 定 
义 并 赋 以 默认 的 undefined， 输 出 结果 自然 应 该 是 undefined， 但 结果 其 实 是 1。 


JavaScript 会 把 var a = 1 划分 成 两 个 语句 : var a 和 a = 1。 第 一 个 语句 (也 就 是 声明 ) 是 
在 编译 阶段 处 理 的 ， 第 二 个 语句 〈 赋值 ) 是 在 执行 阶段 处 理 的 。 


因此 ， 之 前 的 代码 片段 实际 上 是 这 样 执行 的 : 


Var a; //---- 编 译 阶段 






























































二 全 执行 阶段 
console.log( a ); 


第 一 个 代码 片段 是 这 样 执行 的 : 


Wa 编译 阶段 




















console.log( a ); 
a = 1; //------ 执行 阶段 


如 你 所 见 ， 变 量 和 函数 声明 在 编译 阶段 被 移 到 了 代码 的 顶部 一 一 这 就 是 常 说 的 提升 
( hoisting )。 一定 要 记 住 ， 只 有 声明 才 会 被 提升 ， 而 赋值 或 其 他 可 执行 的 逻辑 依然 保留 在 原 位 置 。 
下 面 的 代码 片段 展示 了 涌 数 声明 提升 : 

















foo(); 

function foo() { 
console.log(a); // undefined 
YA 2 


} 

因为 函数 foo () 的 声明 会 被 提升 ， 所 以 我 们 可 以 在 其 定义 之 前 就 调用 该 函数 。 关 于 提升 很 重 
要 的 一 点 是 ， 它 是 以 作用 域 为 单位 进行 的 。 在 函数 foo () 中 ,变量 声明 会 被 提升 到 函数 内 部 的 项 
部 ， 而 不 是 整个 程序 的 项 部。 提升 后 的 函数 foo () 会 变 成 下 面 的 样子 : 
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function foo() { 
var a; 
console.log(a); // undefined 
Wr 


} 
函数 表达 式 并 不 会 像 函 数 声 明 那 样 被 提升 ， 下 面 来 讲 讲 为 什么 会 这 样 。 


2.4 函数 声明 与 函数 表达 式 
定义 函数 有 两 种 方法 。 尽 管 作用 一 样 ， 但 这 两 种 形式 之 间 存在 差异 。 来 看 下 面 的 例子 : 


// 函数 表达 式 

functionone () ; 

// 错误 

// TypeError: functionone is not a function 


Var functionone = function() { 
console.log("functionOne"); 


J 

// 部 数 声 明 
functionTwo(); 

// 正确 

// 打印 出 functionTwo 


function functionTwo() { 
console.log("functionTwo"); 


} 

函数 声明 是 在 执行 流程 进入 到 该 函数 所 处 的 上 下 文 时 处 理 的 , 这 个 处 理 过 程 在 代码 实际 执行 
前 进行 。 对 于 带 有 函数 名 的 函数 (在 上 面 的 例子 中 是 functionTwo () )， 其 名 称 会 被 保存 在 函数 
声明 所 在 的 作用 域 中 。 该 过 程 是 在 作用 域 中 代码 被 执行 前 完成 的 ， 因 此 在 定义 前 调用 


functioTwo () 不 会 产生 错误 。 

但 funtionone() 是 一 个 匿名 函数 表达 式 , 它 是 在 代码 执行 到 其 所 在 位 置 时 进行 求 值 的 (也 
称 为 运行 期 执行 )， 必 须 在 调用 前 声明 。 

所 以 说 ，functionTwo() 的 函数 声明 会 被 提升 ， 而 functionone () 的 函数 表达 式 会 在 执行 
流 逐 行 到 达 其 位 置 时 执行 。 


















































| 全 函数 声明 和 变量 声明 都 会 被 提升 ， 但 是 函数 在 先 ， 变 量 在 后 。 | 








要 记 住 的 是 , 绝 不 要 根据 条 件 来 使 用 函数 声明 。 这 种 行为 是 非 标 准 化 的 ， 在 不 同 平台 上 的 结 
果 并 不 一 致 。 下 面 的 例子 中 就 展示 了 这 种 用 法 ， 依 据 不 同 条 件 进行 函数 声明 。 我 们 尝试 给 函数 
sayMoo () 赋 以 不 同 的 函数 体 ， 但 是 这 种 条 件 代码 并 不 能 保证 在 所 有 的 浏览 器 上 都 能 正常 工作 ， 
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有 可 能 会 产生 无 法 预测 的 结 


// 千 万 别 这 么 做 
if (true) * 
function sayMoo() { 
return 'trueMoo'; 
} 
} 
else { 
function sayMoo() { 
return 'falseMoo'; 
} 
} 


foo(); 
其 实 ， 完 全 可 以 使 用 函数 表达 式 巧妙 地 实现 同样 的 效果 : 


Var sayMoo; 
if (true) { 
sayMoo = function() { 
return 'trueMoo'; 
}; 
} 
else { 
sayMoo = function() { 
return 'falseMoo'; 
ey 
} 


foo(); 


如 果 你 好 奇 为 什么 不 能 在 条 件 语句 块 中 使 用 函数 声明 ， 请 继续 往 下 读 ; 否则 ， 可 以 跳 过 下 面 
一 段 。 

函数 声明 只 允许 出 现在 程序 或 者 函数 体 中 ， 不 能 出 现在 块 结 构 ( {...} ) 中 。 块 只 能 包含 语 
句 , 不 能 包含 函数 声明 。 因 为 这 个 原因 , 几乎 所 有 的 JavaScript 实 现在 这 一 点 上 的 行为 都 各 不 相同 。 
最 好 不 要 在 条 件 语句 块 中 使 用 函数 声明 。 


函数 表达 式 非 常 流行 。 在 JavaScript 程 序 员 中 很 常见 的 一 种 用 法 是 根据 某 种 条 件 生成 函数 定 
义 。 生 成 的 函数 通常 都 是 出 现在 同一 个 作用 域 中 ， 因 此 必须 使 用 函数 表达 式 。 





不 同 的 浏览 器 行为 也 不 同 





























2.5 ”arguments 参数 


arguments 参 数 是 传递 给 函数 的 所 有 参数 的 集合 。 这 个 集合 有 一 个 名 为 length 的 属性 ， 它 包 
含 了 参数 的 个 数 , 单个 的 参数 值 可 以 使 用 数组 的 索引 记 法 来 获得 。 好 吧 ,， 我 们 说 的 其 实 有 一 点 不 
对 。arguments 人 参数 并 不 是 JavaScript 数 组 ， 如 果 你 试图 在 arguments 上 使 用 数组 方法 ,肯定 会 失败 。 
可 以 把 arguments 视 为 一 个 类 似 数组 的 结构 ， 它 能 够 帮助 我 们 编写 可 以 接受 可 变数 量 参数 的 函数 。 
在 下 面 的 代码 片段 中 ， 你 可 以 给 函数 传人 数量 不 一 的 参数 ， 并 使 用 arguments 对 其 进行 迭代 : 
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var sum = function () { 
Var To tOtLaLl 0:; 
for (i = 0; i < arguments.length; i += 1) { 
total += arguments[i]; 
} 
return total; 
说 
console.logl(sum(1,2,3,4,5,6,7,8,9)); // 打印 出 45 
console.logl(sum(1,2,3,4,5)); // 打印 出 15 


之 前 我 们 讨论 过 ，arguments 参 数 并 不 是 真正 的 数组 ， 可 以 按照 下 面 的 方法 将 其 转换 成 数组 : 





var args = Array.prototype.slice.call (arguments); 


转换 成 数组 之 后 ， 就 可 以 按照 需要 进行 操作 了 。 











this 参数 

当 函 数 被 调用 时 ， 除 了 在 调用 时 明确 给 出 的 那些 参数 ， 还 有 一 个 叫 作 this 的 隐 式 参数 也 会 
被 传人 函数 。 它 指向 一 个 与 此 次 函数 调用 相关 联 的 对 象 ， 该 对 象 被 称 为 函数 上 下 文 (function 
context )。 如 果 你 写 过 Java 代 码 ， 应 该 不 会 对 this 关 键 字 感 到 陌生 ; 与 Java 类 似 ，this 指 向 定义 
了 方法 的 类 的 实例 。 

了 解 这 些 知识 后 ， 让 我 们 来 看 看 各 种 调用 方式 。 

1. 作为 函数 调用 

如 果 函 数 不 是 以 方法 、 构 造 函 数 或 通过 apply() 、cal1l11() 调 用 ,那么 它 只 是 作为 一 个 函数 
被 调用 : 


function add() {} 
add (); 
var substract = function() { 























} 


substract (); 

当 函 数 以 这 种 模式 调用 时 ，tphis 被 绑 定 在 全 局 对 象 上 。 很 多 专家 认为 这 是 一 个 糟糕 的 设计 
选择 。 照 理 说 ，this 应 该 被 绑 定 在 父 上 下 文 (parent context ) 上 。 在 这 种 情况 下 , 你 可 以 把 this 
的 值 保 存在 另 一 个 变量 中 。 随 后 我 们 会 专门 讲述 这 种 调用 模式 。 

2. 作为 方法 调用 

方法 是 作为 对 象 属性 的 图 数 。 对 于 方法 来 说 ，this 被 绑 定 在 方法 被 调用 时 所 在 的 对 象 上 : 





Var person = { 
name: 'Albert Einstein' ， 
age: 66, 
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greet: function () { 
console.log(this.name); 
} 


person.greet (); 


在 本 例 中 ，this 被 绑 定 在 greet 被 调用 时 所 在 的 person 对 象 上 ， 因 为 greet 是 person 的 一 个 
方法 。 让 我 们 来 对 比 一 下 在 这 两 种 调用 模式 中 this 的 变化 。 


来 看 下 面 的 HTML 和 JavaScript 代 码 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>This test</title> 
<script type="text/javascript"> 
function testF(){ return this; } 
console.log(testF()); 
var testFCopy = testrF; 
console.log(testFCopy()); 
Var testobj = { 
testObjFunc: testF 
}; 
console.log(testObj.testObjFunc ()); 
</script> 
</head> 
<body> 
</body> 
</html> 


在 Firebug 控 制 台 中 ， 可 以 看 到 以 下 输出 : 











和 器 《 》 壮 | Consolev HIML CSS Script DOM Net Cookies 


1 Clear Persist Profile 《JJ Errors ”Warnings Info “Debug Info Cookies 


Window thistest.html 
Window thistest.htm/ 
Object { testObjFunc=testF() } 


























前 两 次 调用 都 是 函数 调用 。 因 此 ，this 的 值 指 向 的 是 全 局 上 下 文 〈 在 这 里 是 windqovw )。 

接 下 来 ， 我 们 定义 了 一 个 名 为 testobj 的 对 象 ， 该 对 象 包含 一 个 testobjFunc 属 性 ， 属 性 
值 是 testF () 的 引用 一 一 如 果 你 没有 意识 到 生成 了 对 象 , 也 不 用 担心 。 这 样 一 来 ,我 们 就 创建 了 
testobjFunc () 方 法 。 如 果 调 用 该 方法 , 在 显示 出 this 的 值 的 时 候 就 能 够 看 出 函数 的 上 下 文 了 。 

3. 作为 构造 函数 调用 

构造 函数 的 声明 和 其 他 函数 一 样 , 作为 构造 函数 使 用 的 函数 也 没有 什么 特别 之 处 。 但 是 构造 
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函数 的 调用 方法 却 大 相 径 庭 。 

要 以 构造 亢 数 的 方式 调用 函数 ， 需 要 在 函数 调用 前 加 上 关键 字 new。 这 样 的 话 ，this 就 被 绑 
定 在 新 创建 的 对 象 上 了 。 

在 进一步 讨论 之 前 , 先 简要 介绍 一 下 JavaScript 中 的 面向 对 象 。 当 然 , 我 们 会 在 下 一 章 中 详细 
讲述 这 个 话题 。JavaScript 是 一 门 原型 继承 的 语言 (prototypal inheritance language )， 也 就 是 说 对 
象 可 以 直接 从 其 他 对 象 中 继承 属性 。JavaScript 中 没有 类 。 使 用 new 前 级 调用 的 函数 被 称 为 构造 函 
数 。 通常 为 了 易于 区 分 , 构造 函数 并 没有 采用 怠 峰 拼 写法 ( CamelCase ), 而 是 采用 了 Pascal 拼 写 
法 (PascalCase )。" 注 意 在 下 面 的 例子 中 ， 了 函数 greet 使 用 this 来 访问 name 属 性 ，this 参 数 被 
绑 定 在 Person 对 象 上 : 


var Person = function (name) { 





片 



































this.name = name; 
地 
Person.prototype.greet = function () { 
return this.name; 
js 
Var albert = new Person('Albert Einstein'); 
console.log(albert .greet ()); 


在 下 一 章 学 习 对 象 的 时 候 ， 我 们 来 讨论 这 种 调用 方法 。 

4. 通过 apply () 和 call() 方 法 调用 

我 们 之 前 说 过 JavaScript 函 数 也 是 对 象 .- 和 其 他 对 象 一 样 ,函数 也 具备 方法 。 要 想 使 用 apply () 
方法 调用 函数 ， 需 要 传人 两 个 参数 : 作为 函数 上 下 文 的 对 象 以 及 作为 调用 参数 的 数组 。call () 
方法 的 用 法 也 差不多 ， 除 了 调用 参数 不 能 作为 数组 传人 ， 而 是 要 直接 写成 参数 列表 的 形式 传人 。 


























2.6 ”匿名 水 数 


本 章 前 面 介绍 过 匿名 函数 ， 考 虑 到 这 是 一 个 非常 重要 的 概念 ， 我 们 将 对 其 作 进一步 的 讲解 。 
由 于 借鉴 了 Scheme， 匿 名 函数 是 JavaScript 中 重要 的 逻辑 与 结构 构件 。 


匿名 冰 数 通常 用 于 无 需 函 数 名 的 情况 。 下 面 来 看 一 些 匿名 函数 最 常见 的 用 法 。 











2.6.1 对 象 创建 过 程 中 的 匿名 函数 

匿名 函数 可 以 作为 对 象 的 属性 。 这 样 ， 就 可 以 使 用 点 操作 符 ( . ) 调用 该 函数 了 。 如 果 你 有 
Java 或 其 他 面向 对 象 语言 的 背景 ， 对 这 种 用 法 绝对 不 会 陌生 。 在 这 类 语言 中 ， 作 为 类 的 组 成 部 分 
的 函数 ， 通 常 采 用 class. function () 的 写法 来 调用 。 来 看 下 面 的 例子 ; 



































GD Pascal 拼 写法 中 第 一 个 单词 的 首 字母 大 写 ， 而 驼峰 拼写 法 中 第 一 个 单词 的 首 字母 小 写 。 一 一 译 者 注 
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var Santa = { 
say :function(){ 
console.log("ho ho ho") 
} 
} 


santa.say (); 

上 例 中 创建 了 一 个 包含 say 属 性 的 对 象 ， 该 属性 值 是 一 个 匿名 函数 。 在 这 种 情况 下 ， 这 个 
生 不 再 叫 作 函 数 ,而 是 被 称 为 方法 ,不 需要 函数 名 的 原因 在 于 我 们 打算 将 其 作为 对 象 属性 来 调用 ， 
这 是 一 种 常用 的 模式 ， 用 起 来 很 方便 。 





al 

















| 


i 

















2.6.2 ”列表 创建 过 程 中 的 匿名 函数 


在 这 里 , 我 们 创建 了 两 个 匿名 函数 ,并 将 它们 添加 到 了 一 个 数组 里 ( 随后 会 详细 讨论 数组 )。 
然后 遍历 该 数组 ， 在 每 次 循环 过 程 中 执行 对 应 的 函数 : 





<script type="text/javascript"> 
var things = [ 
function() { alert ("ThingOne") 
function() { alert ("ThingTwo") 
Wy 
for (Var x=0; x<things.length; x++) { 
things [x] (); 
} 


</script> 


} 
} 


2.6.3 ”作为 函数 参数 的 匿名 函数 
这 是 最 常用 的 模式 之 一 ， 在 大 多 数 专业 代码 库 中 都 可 以 看 到 此 类 用 法 : 
// 函数 语 各 


function eventHandler (event){ 
event ( ) ; 


} 





eventHandler (function(){ 

// 执行 事件 相关 的 操作 
console.log("Event fired"); 
} 

在 上 面 的 代码 中 ,我们 将 匿名 函数 传 给 了 另 一 个 函数 。 在 接收 函数 中 , 执行 作为 参数 传人 的 
函数 。 如 果 要 创建 的 是 一 次 性 (single-use ) 函数 ， 比 如 对 象 方法 或 事件 处 理 程序 ， 这 种 用 法 就 很 
方便 了 。 匿 名 函数 的 语法 要 比 两 步 走 的 函数 声明 ( 先 声明 函数 ， 然 后 描述 函数 操作 ) 更 紧凑 。 


























2.6.4 出 现在 条 件 逻 辑 中 的 匿名 函数 
可 以 使 用 匿名 函数 表达 式 来 根据 条 件 改变 行为 。 下 面 的 例子 展示 了 这 种 使 用 模式 : 
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Var shape; 
if(shape name === "SQUARE") { 
shape = function() { 
return "drawing square"; 
} 
} 
else { 
shape = function() { 
return "drawing square"; 
} 
} 
alert (shape()); 


在 这 里 , 根据 不 同 的 条 件 为 shape 变量 赋 以 不 同 的 函数 。 善 加 利用 的 话 , 这 种 模式 大 有 用 处 。 
如 果 不 加 节制 ， 则 会 产生 难以 阅读 及 排 错 的 代码 。 


在 本 书 随后 的 部 分 中 ， 我 们 还 会 看 到 一 些 函数 式 编 程 技 巧 ， 例 如 记忆 化 (memoization ) 以 
及 函数 调用 缓存 (caching functions call )。 如 果 本 章 前 面 的 内 容 你 都 是 快速 浏览 的 ， 建 议 你 现在 
先 停 下 来 ， 思 考 一 下 之 前 所 讨论 过 的 内 容 。 接 下 来 的 几 页 中 包含 了 大 量 的 信息 ,需要 花 些 工夫 才 
能 够 理解 掌握 。 最 好 在 继续 往 下 读 之 前 把 本 章 再 重读 一 遍 。 下 一 节 重 点 讲 闭 包 和 模块 。 







































































2.7 闭 包 


闭 包 是 纯 函 数 式 编程 语言 的 传统 特性 之 一 。 通 过 将 闭 包 视 为 核心 语言 构件 的 组 成 部 分 ， 
JavaScript 语 言 展示 了 其 与 函数 式 编程 语言 的 紧密 联系 。 由 于 能 够 简化 复杂 的 操作 ， 闭 包 在 主流 
JavaScript 库 以 及 高 水 平 产品 代码 中 日 益 流 行 起 来 。 你 会 发 现 ， 有 经 验 的 JavaScript 程 序 员 在 谈 到 
闭 包 的 时 候 几 乎 都 是 毕 恭 毕 敬 的 , 好 像 这 东西 是 某 种 超出 了 凡人 理解 能 力 的 神器 一 般 。 其 实 并 非 
如 此 。 在 学 习 闭 包 的 概念 时 ， 你 会 发 现 其 非常 直观 易 懂 ， 几 乎 都 是 明摆着 的 。 在 领会 闭 包 之 前 ， 
建议 你 通过 反复 阅读 本 章 内 容 、 在 互联 网 上 查找 相关 资料 、 编 写 代 码 、 阅 读 JavaScript 库 来 理解 闭 
包 的 工作 原理 一 一 别 轻 言 放弃 。 


首先 要 认识 到 的 就 是 : 财 包 在 JavaScript 中 是 无 所 不 在 的 。 它 并 不 是 语言 的 某 种 隐藏 特性 。 


在 寻根 求 源 之 前 , 来 快速 回顾 一 下 JavaScript 的 词法 作用 域 ( lexcial scope )。 我 们 详细 讨论 过 ， 
JavaScript 中 如 何在 函数 一 级 上 确定 词法 作用 域 , 词 法 作用 域 实际 上 决定 了 所 有 标识 符 的 声明 位 置 
和 方式 ， 预 测 了 标识 符 在 执行 过 程 中 的 查找 过 程 。 

简单 地 说 , 闭 包 是 在 函数 声明 时 所 创建 的 作用 域 , 它 使 得 函数 能 够 访问 并 人 处理 函数 的 外 部 变 
量 。 换 句 话说 ， 闭 包 可 以 让 函数 访问 到 在 函数 声明 时 处 于 作用 域 中 的 所 有 变量 以 及 其 他 函数 。 

来 看 几 个 样 例 代码 ， 理 解 一 下 这 个 定义 : 


var outer = 'I am outer'; // 在 全 局 作用 域 中 定义 一 个 变量 
function outerFn() { // 在 全 局 作用 域 中 声明 一 个 函数 
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console.log (outer); 
} 
outerFn(); // 打印 出 I am outer 
等 着 看 一 些 不 一 般 的 结果 ? 没有 的 , 这 其 实 都 是 闭 包 最 普通 的 用 法 。 我 们 在 全 局 作用 域 中 分 
别 声 明了 一 个 变量 和 一 个 函数 。 在 函数 中 ,能够 访问 到 全 局 作用 域 中 声明 的 变量 outer。 所 以 实 
质 上 ， 函 数 outezrFn () 的 外 围 作用 域 就 是 一 个 闭 包 ,总 是 可 为 其 所 用 。 这 是 个 不 错 的 开始 , 那么 
你 可 能 会 纳闷 为 什么 这 样 就 能 说 闭 包 是 个 好 东西 了 ? 


















































来 个 复杂 点 的 例子 : 
var outer = 'Outer'; // 全 局 变量 
var copy; 


function outerFn(){ // 全 局 函数 
Var inner = 'Inner'; // 该 变量 只 有 函数 作用 域 ， 无 法 从 外 部 访问 


function innerFn(){ // outerFn() 中 的 innerFn() 
// 全 局 上 下 文 和 外 围 上 下 文 都 可 以 在 这 里 使 用 ， 
// 因此 可 以 访问 到 outer 和 inner 
console.log (outer); 
console.log (inner); 
} 
copy=innerFn; // 保存 ijnnerFn() 的 引用 
// 因为 copy 是 在 全 局 上 下 文中 声明 的 ， 所 以 在 外 部 可 以 使 用 
} 
outerFn(); 
copy (); // 不 能 直接 调用 innerFn()， 但 是 可 以 通过 在 全 局 作用 域 中 声明 的 变量 来 调用 


来 分 析 一 下 上 面 的 例子 。 在 innerFn () 中 可 以 访问 变量 outer， 因 为 它 处 于 全 局 上 下 文中 。 
在 执行 完 outerFn () 之 后 ， 执 行 了 innerFn () ， 这 是 通过 将 该 图 数 的 引用 复制 到 一 个 全 局 变量 
copy 中 来 实现 的 。 在 利用 变量 copy 调 用 函数 innerFn () 执行 时 ， 此 刻 已 经 不 在 outerFn () 的 作 
用 域 中 了 。 因 此 下 面 的 代码 不 是 应 该 失败 吗 ? 














console.log (inner); 
变量 inner 的 值 应 该 是 undefined 吧 ? 可 是 ， 上 面 代码 片段 的 输出 却 是 : 


"oY 
"Inner" 


究竟 是 什么 使 得 函数 innerFn () 在 执行 时 仍然 能 够 访问 变量 inner, 即便 是 在 创建 该 变量 的 
作用 域 已 经 不 存在 很 久之 后 ?” 当 我 们 在 outerEn () 中 声明 innerEn () 时 ， 不 仅 定义 了 函数 ， 还 
创建 了 一 个 闭 包 ， 其 中 包含 了 所 声明 的 函数 以 及 在 声明 时 处 于 作用 域 中 的 所 有 变量 。 在 执行 
innerFn() 时 , 尽管 声明 该 函数 的 作用 域 已 经 不 在 了 , 但 是 它 仍 能 够 通过 闭 包 访问 当初 声明 时 所 
在 的 作用 域 。 


把 这 个 例子 做 一 个 扩展 ， 来 看 看 闭 包 还 能 做 些 什么 : 
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Var outer='outer'; 
Var copy; 
function outerFn() { 
Var inner='inner'; 
function innerFn(param){ 
console.log (outer); 
console.log (inner); 
console.log (param); 
console.log (magic); 
} 
copy=innerFn; 
} 
console.log(magic); //ERROR: magic not defined 
Var magic="Magic"; 
outerFn(); 
copy ("copy"); 


在 上 面 的 例子 中 , 我 们 添加 了 一 些 新 内 容 。 首先 , 向 innerFn () 添加 一 个 参数 一 一 这 仅仅 是 
为 了 演示 参数 也 是 闭 包 的 一 部 分 。 我 们 要 重点 强调 两 点 。 


外 围 作 用 域 中 的 所 有 变量 都 包含 在 闭 包 中 ， 哪 怕 它 们 的 声明 出 现在 函数 声明 之 后 。 这 正 是 
innerFn() 中 的 console.1og (magic) 能 够 正常 工作 的 原因 。 


但 是 在 全 局 作用 域 中 的 console.1og (magic) 却 出 现 了 错误 ， 这 是 因为 就 算 在 相同 的 作用 
域 中 ， 未 定义 的 变量 也 不 能 被 引用 。 


所 有 这 些 例子 都 则 在 传达 一 些 与 闭 包 工作 原理 息息相关 的 概念 。 闭 包 是 JavaScript 语 言 中 的 重 
要 特性 ， 在 大 多 数 库 中 都 能 看 到 它 。 


让 我 们 来 看 儿 个 常见 的 闭 包 使 用 模式 。 




















2.8 ”计时 器 和 回调 函数 


在 实现 计时 串 或 回调 函数 时 , 大 多 需要 在 之 后 的 某 个 时 间 点 上 有 异步 调用 处 理 程序 。 由 于 是 异 
步调 用 ,我 们 需要 在 相关 函数 中 访问 作用 域外 的 变量 。 考 虑 下 面 的 例子 : 





function delay (message) { 
setTimeout( function timerFrn()t{ 
console.log( message ); 
下 PLDOOO 7 
} 
delay( "Hello World" ); 


我 们 将 内 部 的 函数 timerFn () 传递 给 内 建 的 库 函 数 setTimeout () 。 但 是 timerFn () 有 一 个 
覆盖 了 aelay () 作用 域 的 作用 域 财 包 ， 因 此 它 能 够 访问 到 变量 message。 
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2.9 私有 变量 


闭 包 常用 来 将 信息 封装 成 私有 变量 的 形式 。 在 JavaScript 中 无 法 使 用 Java 或 C++ 中 的 类 似 封装 
方法 ,但 通过 利用 闭 包 ， 我 们 也 可 以 实现 类 似 的 效果 : 


function privateTest(){ 
Var points=0; 
this.getPoints=function(){ 
return points; 
} 
this.score=function(){ 
pointst+; 
上 
} 




















Var private = new privateTest (); 
private.score(); 
console.log(private.points); // undefined 
console.log(private.getPoints()); 


在 上 例 中 ,我 们 创建 了 一 个 函数 ,打算 将 其 作为 构造 函数 调用 。 在 privateTest () 函数 中 ， 
创建 了 函数 作用 域 变量 points。 这 个 变量 只 能 在 privateTest () 中 使 用 。 另 外 ， 还 创建 了 一 个 
访问 器 ( accessor ) 函数 ( 也 称 为 接收 器 , getter ) getPoints () , 这 个 方法 允许 从 privateTest () 
外 部 只 读 取 变量 points 的 值 ， 使 得 该 变量 成 为 函数 的 私有 变量 。 而 男 一 个 方法 score () 允许 在 不 
直接 从 外 部 访问 的 情况 下 修改 私有 变量 points 的 值 。 这 样 ， 我 们 写 出 的 代码 就 能 够 以 一 种 受 控 的 
方式 来 更 新 私有 变量 。 在 编写 库 的 时 候 , 如 果 你 希望 根据 约定 和 预先 建立 的 接口 来 控制 变量 访问 
方式 的 话 ， 这 种 模式 非常 有 用 。 




















2.10 循环 与 财 包 
考虑 下 面 这 段 在 循环 中 使 用 函数 的 代码 : 


for (var i=1; i<=5; I++) { 

setTimeout( function delay(){ 
console.log( i ); 
2 守 OiO3 

} 

这 应 该 会 在 控制 台中 以 100ms 的 间隔 分 别 打 印 出 1、2、3、4、5， 对 不 对 ?但 实际 的 结果 是 以 
100ms 为 间隔 ,分 别 打印 出 6、6、6、6、6。 这 是 怎么 回 事 ? 在 这 里 , 磁 到 的 是 一 个 与 闭 包 和 循环 
有 关 的 常见 问题 。 变 量 i 的 值 在 函数 被 绑 定 后 更 新 ， 这 就 意味 着 每 一 个 被 绑 定 的 函数 打印 出 的 总 
是 变量 i 中 保存 的 最 后 那个 值 。 实 际 上 ，setTimeout 的 回调 函数 是 在 循环 结束 后 才 执行 的 。 如 
果 你 试图 以 这 种 方式 在 循环 中 使 用 函数 ，JSLint 会 发 出 警告 信息 。 
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怎么 修改 这 个 错误 呢 ? 我 们 可 以 引入 一 个 函数 作用 域 ， 并 在 该 作用 域 中 建立 变量 i 的 本 地 副 
本 。 下 面 的 代码 片段 就 展示 了 正确 的 做 法 : 


for (var i=1; i<=5; i++) { 
(function(j)t 
setTimeout( function delay (){ 
console.log( j ); 
Fr E10O0)s 
后 人 村 
} 


将 变量 i 作为 参数 传人 ,并 将 其 复制 到 IIFE 的 局 部 变量 j 中 。IIFE 会 针对 每 次 迭代 创建 一 新 的 
作用 域 ,使 用 正确 的 值 来 更 新 局 部 变量 。 











2.11 模块 


模块 可 用 于 模拟 类 , 强调 的 是 对 变量 和 函数 的 公共 及 私有 访问 。 模块 有 助 于 减少 全 局 作用 域 
污染 。 有 效 地 使 用 模块 能 够 降低 大 型 代码 基础 库 之 间 的 名 称 冲突 。 这 种 模式 的 典型 用 法 如 下 : 




















var moduleName=function() { 
// 私有 状态 
// 私有 函数 
return { 
// 公共 状态 
// 公共 变量 
} 


要 实现 以 上 模式 有 两 个 要 求 。 

口 必须 有 一 个 外 围 函 数 ， 至 少 需 要 执行 一 次 。 

口 外 围 函 数 必须 返回 至 少 一 个 内 部 函数 ( inner function )。 这 需要 创建 一 个 涵盖 了 私有 状态 
的 财 包 ， 和 否则 无 法 访问 私有 状态 。 

请 看 下 面 的 模块 代码 : 


var superModule = (function ()f{ 
Var secret = 'supersecretkey'; 
Var passcode = 'nuke'; 














function getSecret() { 
console.log( secret ); 


} 
function getPassCode() { 
console.log( passcode ); 


} 


return { 
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getSecret: getSecret, 
getPassCode: getPassCode 
} 
人 这 
superModule.getSecret () ; 
superModule.getPassCode(); 





这 个 例子 满足 了 上 面 两 个 条 件 。 首 先 ， 我 们 创建 了 一 个 IFE ( 具名 函数 也 可 以 ) 作为 外 围 
( outer enclosure )。 定义 在 其 中 的 变量 将 会 保持 私有 状态 , 因为 它们 的 作用 域 被 限制 在 函数 内 部 。 
我 们 将 公共 函数 返回 ， 以 确保 拥有 一 个 覆盖 了 私有 作用 域 的 闭 包 。 在 模块 模式 中 使 用 IIFE 实 际 
上 会 产生 该 函数 的 一 个 单 例 。 如 果 你 想 生 成 多 个 实例 ,需要 创建 具名 函数 表达 式 ， 将 其 作为 模 
块 的 一 部 分 。 


我 们 还 会 继续 学 习 JavaScript 中 和 函数 相关 的 方方面面 以 及 闭 包 。 有 很 多 与 此 相关 的 新 颖 用 
法 。 理解 各 种 模式 的 一 种 有 效 方法 就 是 研究 流行 的 JavaScript 库 的 代码 , 在 自己 的 代码 中 实践 这 些 























模式 。 
编码 风格 
邮 和 上 一 章 一 样 ,我 们 来 考虑 一 些 编码 风格 并 以 此 作 结 。 再 次 重申 ,这些 风格 只 是 作为 一 种 指 
区 南 ， 并 非 规则 一 一 如 果 你 认为 有 其 他 更 好 的 方案 ， 只 管 采 用 就 行 了 。 
口 使 用 函数 声明 ， 不 使 用 函数 表达 式 : 
// 不 建议 
const foo = function () { 
je 
// 建议 


function foo() { 


} 
口 绝 不 要 在 非 函数 块 (让 、while 等 ) 中 声明 函数 。 可 以 选择 将 函数 赋 给 变量 。 尺 管 浏览 器 允 
许 你 这 么 做 ， 但 是 不 同 的 浏览 器 对 此 的 解释 方式 各 不 相同 。 
口 不 要 给 参数 起 arguments 的 名 字 , 这 会 使 其 在 函数 作用 域 中 的 优先 级 高 于 arguments 对 象 。 





2.12 小 结 


在 本 章 中 ， 我 们 学 习 了 JavaScript 函 数 。 在 JavaScript 中 ， 函 数 扮演 着 重要 的 角色 。 我 们 讨论 
了 函数 的 创建 和 使 用 、 闭 包 的 重要 概念 以 及 函数 中 的 变量 作用 域 ， 另外 还 研究 了 将 函数 作为 创建 
可 见 类 和 封装 的 方法 。 


在 下 一 章 中 ， 我 们 将 学 习 JavaScript 中 的 各 种 数据 结构 以 及 数据 人 处理 技术 。 
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数据 结构 及 相关 操作 














在 大 多 数 的 编程 时 间 里 ,你 都 免不了 要 跟 数 据 打 交道 。 这 包括 处 理 数据 属性 、 根 据 数据 进行 
推演 以 及 修改 数据 性 质 。 在 本 章 中 , 我 们 将 详细 地 学 习 JavaScript 中 的 各 种 数据 结构 以 及 数据 处 理 
技术 。 学 会 这 些 语 言 构件 的 正确 用 法 ， 才 能 够 写 出 准确 、 简 洁 、 易 读 、 更 快 的 程序 。 本 章 包含 以 
下 主题 : 


口 正则 表达 式 
口 严格 匹配 
口 匹配 字符 组 
口 重复 出 现 
口 首部 与 尾部 
口 向 后 引用 
口 贪 焚 限 定 符 以 及 惰性 限定 符 
口 数组 

DQ map 

口 Set 

口 编码 风格 











3.1 正则 表达 式 


如 果 你 还 不 熟悉 正则 表达 式 , 最 好 花 时 间 学 习 一 下 。 学习 有 效 地 使 用 正则 表达 式 是 回报 最 高 
的 技能 之 一 。 在 大 多 数 的 代码 评审 过 程 中 , 我 发 表 的 第 一 条 意见 就 是 如 何 把 一 段 代码 转化 成 一 行 
正则 表达 式 (regular expression，RegEx )。 如 果 你 研究 过 流行 的 JavaScript 库 ， 就 会 惊讶 于 正则 表 
达 式 的 无 所 不 在 。 大 多 数 有 经 验 的 工程 师 都 离 不 开 它 , 这 主要 是 因为 一 旦 学 会 , 正则 表达 式 用 起 
来 既 精 炼 又 易于 测试 。 不 过 , 学 习 正 则 表达 式 可 是 需要 下 一 番 功 夫 。 正 则 表达 式 是 一 种 表示 匹配 
字符 串 的 模式 的 方法 。 表 达 式 本 身 是 由 项 ( term ) 和 操作 符 (operator ) 组 成 的 ， 它们 让 我 们 得 以 
定义 这 些 模式 。 稍 后 会 介绍 这 些 项 和 操作 符 的 组 成 。 
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在 JavaScript 中 ,创建 正则 表达 式 的 方法 有 两 种 : 通过 正则 表达 式 字面 量 和 构造 RegExp 对 象 
的 实例 。 


举例 来 说 ， 如 果 你 想 创建 一 个 能 够 严格 匹配 字符 串 test 的 正则 表达 式 ， 可 以 使 用 下 面 的 正 
则 表达 式 字 面 量 : 
Var pattern = /test/; 


正则 表达 式 使 用 斜 杠 作 为 分 隔 符 。 我 们 也 可 以 将 正则 表达 式 作 为 字符 串 传 人 RegExp () ， 从 
而 创建 出 一 个 RegExp 实 例 : 











Var pattern = new RegExp("test"),; 


这 两 种 格式 会 生成 相同 的 正则 表达 式 , 并 保存 在 变量 pattern 中 。 除 了 正则 表达 式 本 身 之 外 ， 
还 有 三 个 标志 可 以 配合 使 用 。 





口 i: 可 以 使 正则 表达 式 忽 略 大 小 写 , 这 样 的 话 , /test /i 不 仅 能 匹配 test, 还 能 匹配 rest、 
TEST、tEsT 等 。 

口 g: 相 较 于 只 匹配 模式 的 第 一 次 出 现 ，g 标 志 可 以 使 正则 表达 式 匹配 模式 的 所 有 实例 。 随 
后 会 有 详细 说 明 。 
口 m: 可 以 使 正则 表达 式 跨 多 行 ( 例如 textarea 元 素 的 值 ) 进行 匹配 。 




















这 些 标 志 要 放 在 正则 表达 式 字面 量 的 尾部 ( 例如 /test/ig ), 或 是 作为 第 二 个 字符 串 参 数 传 


给 RegExp 构 造 了 现 数 (new RegFxp("test",，, "ig") )。 


下 面 的 例子 演示 了 各 种 标志 的 用 法 ， 以 及 它们 是 如 何 影 响 模式 匹配 的 : 














var pattern = /orange/; 
console.log(pattern.test ("orange")); // true 


Var patternIgnoreCase = /orange/i; 
console.log(patternIgnoreCase.test ("Orange")); // true 


var patternGlobal = /orange/ig; 
console.log(patternGlobal.test ("Orange Juice")); // true 


如 果 只 是 测试 模式 是 否 能 匹配 某 个 字符 串 , 那 就 没 太 大 的 意思 了 。 让 我 们 来 看 看 如 何 表示 更 
复杂 的 模式 。 











3.2 严格 匹配 
任何 非 正则 表达 式 字 符 或 操作 符 的 字符 序列 ， 代 表 的 都 是 该 字符 本 身 : 


Var parttern = /orange/; 
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这 里 要 表示 的 是 o 后 面 跟着 r，r 后 面 跟着 a，a 后 面 跟 着 n…… 明白 了 吧 。 在 使 用 正则 表达 式 


的 时 候 , 我 们 很 少 采 用 严格 匹配 ,因为 这 和 直接 比较 两 个 字符 串 没什么 分 别 。 严 格 匹配 有 时 候 也 
叫 作 简 化 模式 〈simple pattern )。 


3.3 ”匹配 字符 组 
如 果 想 针对 一 组 字符 进 ， 可 以 将 这 组 字符 放 入 [] 。 例 如 ，[apbc] 表 示 a、p 或 c 中 任意 
一 个 字符 : 


var pattern = /l[abc]/; 
console.log(pattern.test('a')); //true 
console.log(pattern.test('d')); //false 


也 可 以 在 模式 开头 加 上 一 个 ^〈 脱 字符 ) 来 指定 不 想 匹 配 到 的 字符 : 


Var pattern = /[^abc]/; 
console.log(pattern.test('a')); //false 
console.log(pattern.test('d')); //true 


这 种 模式 还 有 男 一 种 很 重要 的 用 法 是 用 来 指明 值 的 范围 。 如 果 想 匹配 字符 或 数字 的 某 个 连续 
范围 ， 可 以 使 用 下 面 的 模式 : 


var pattern = /[0-5]/; 











I tt ern.test(3)); //true 

console.log(pattern.test (12345)); //true 
console.log(pattern.test (9)); //false 
console.log(pattern.test (6789)); //false 
console.l1og(/[0123456789]/.test("This is year 2015")); //true 





像 $ 和 .这 样 的 特殊 字符 ， rh ont 身 之 外 的 其 他 字符 , 要 么 作为 限定 其 之 前 项 的 操 
作 符 。 实 际 上 ， 我 们 已 经 看 到 了 字符 [、] 、- 和 人 ^ 可 用 来 表示 各 自 字面 值 之 外 的 含义 。 





我 们 如 何 匹配 [、$、*“ 或 其 他 特殊 字符 的 字面 量 呢 ? 在 正则 表达 式 中 ， 反 和 斜 ee 
对 其 后 的 字符 进行 转 义 ， 从 而 实现 字面 量 的 匹配 。 因 此 ,\ [匹配 的 就 是 一 个 普通 的 字符 [， 
是 字符 组 表达 式 的 开 括 号 。 双 反 斜 杠 〈\\ ) 可 以 匹配 一 个 普通 的 反 斜 杠 。 

















上 例 中 , 我 们 看 到 test () 方 法 可 以 根据 模式 是 否 匹 配 来 返回 true 或 false。 但 有 时 候 需 要 访问 
特定 模式 所 出 现 的 位 置 ， 而 exec () 方 法 可 以 解决 这 个 问题 。 





exec () 方 法 接受 单个 字符 串 作为 参数 ,返回 一 个 包含 了 所 有 匹配 的 数组 。 考 虑 下 面 的 例子 : 


Var strToMatch = 'A Toyota! Race fast 
Var regExAt = /Toy/; 
Var arrMatches = regExAt .exec (strToMatch); 
console.log(arrMatches); 


Safe car! A Toyota!'; 
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这 个 代码 片段 的 输出 是 [Toy]。 如 果 你 需要 模式 Troy 所 有 的 匹配 实例 ， 可 以 使 用 g ( global ) 
标志 : 

var strToMatch = 'A Toyota! Race fast, safe car! A Toyota!'，; 

Var regExAt = /Toy/g; 


Var arrMatches = regExAt .exec(strToMatch); 
console.log(arrMatches); 


这 将 返回 原始 文本 中 所 出 现 的 所 有 Toy。String 对 象 有 一 个 match() 方 法 ， 其 功能 与 exec () 
方法 类 似 。match () 需 要 在 String 对 象 上 调用 ,并 将 正则 表达 式 作为 参数 传人 。 考 虑 下 面 的 例子 : 

Var strToMatch = 'A Toyota! Race fast, safe car! A Toyota!'，; 

Var regExAt = /Toy/; 


Var arrMatches = strToMatch.match (regExAt); 
console.log(arrMatches); 


在 本 例 中 ,我 们 在 String 对 象 上 调用 了 match () 方 法 ， 并 将 正则 表达 式 作为 参数 一 并 传人 。 
可 以 看 到 两 种 方法 的 结果 是 一 样 的 。 


还 有 一 个 String 对 象 的 方法 是 replace() ， 它 可 以 使 用 其 他 字符 串 来 蔡 换 某 个 子 





Ud 


Var strToMatch = 'Blue is your favorite color ?'， 
Var regExAt = /Blue/; 
console.log(strToMatch.replace (regExAt, "Red")); 
// 输出 "Red is your favorite color ?" 


可 以 将 函数 作为 replace () 方 法 的 第 二 个 参数 。 该 函数 使 用 匹配 的 文本 作为 参数 , 将 用 来 替 
换 的 文本 作为 函数 值 返回 : 


Var strToMatch = 'Blue is your favorite color ?'， 

Var regExAt = /Blue/; 

console.log(strToMatch.replace (regExAt, function(matchingText){ 
return 'Red'; 

a 

// 输出 "Red is your favorite color ?" 


String 对 象 的 split () 方 法 也 可 以 接受 正则 表达 式 作 为 参数 并 返回 一 个 数组 ， 该 数组 中 包含 
了 经 过 分 割 后 的 所 有 子 串 : 





Var SCOlOE = "SUn; moOGn Sa 了 

Var reComma = /\,/; 
console.log(sColor.split (reComma)); 
// 输出 ["sun"， "moon",， "stars"] 


因为 逗号 在 正则 表达 式 中 有 特殊 含义 ,， 所 以 如 果 需 要 使 用 它 的 字面 意义 的 话 , 需要 在 它 前 面 
加 上 一 个 反 斜 杠 进行 转 义 。 


使 用 简单 字符 组 就 可 以 匹配 多 个 模式 。 假 如 想 匹配 cat 、bat 和 fat, 下 面 的 代码 片段 展示 了 
具体 的 做 法 : 
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Var strToMatch = 'wooden bat, smelly Cat,a fat cat'; 
Var. Te = 7/ [bef]aty oly 

var arrMatches = strToMatch.match (re); 
console.log(arrMatches); 





//l bats Cat fat "Gat |] 

如 你 所 见 ， 这 种 用 法 可 以 写 出 更 简洁 的 正则 表达 式 。 来 看 下 面 的 例子 : 
var 人 i pe hp ie ee a aS i I a tts tds Ms 

Var re = /i[0-5]/gi; 


var 0 = strToMatch.match (re); 
OE OPED 
ww i i 生生 3 | 


在 本 例 中 , 我 们 使 用 范围 [0-5] 来 匹配 待 匹 配 字符 串 中 的 数字 部 分 , 得 到 的 匹配 结果 是 从 i0 
到 i5。 你 也 可 以 使 用 否定 字符 ^ 来 过 滤 出 其 余 的 匹配 : 


var StrTOMaCeh ss. "TlyLi2 LLd, L010 T7180 
var re = /i[^0-5]/gi; 

var arrMatches = strToMatch.match (re); 
console.log(arrMatches); 

A MW Ma Br "WA Qa 


主意 ， 我 们 否定 的 只 是 范围 子 句 ， 而 非 整 个 表达 式 。 
有 些 字符 组 有 对 应 的 快捷 写法 。 例 如 ，\a 表 示 的 意义 和 [0-9] 相 同 。 

















Fey 












































写 法 省 -区 
\d 任意 的 单个 数字 字符 
\w 任意 单个 字母 或 数字 字符 We 
\s 任意 的 单个 空白 字符 (空格 、 制 表 符 、 换 行 符 等 ) 
\D 任意 的 单个 非 数 字 字 符 
\W 任意 的 单个 非 字 母 或 数字 字符 
\S 任意 的 单个 非 空白 字符 





除 换行 符 之 外 的 任意 单个 字符 
这 些 快捷 写法 是 书写 简洁 的 正则 表达 式 的 关键 。 看 下 面 的 例子 : 


Var strToMatch = '123-456-7890'; 

var Ee sO0=9] [09:09.]3IE0=9] 0=9 .0090/3 
Var arrMatches = strToMatch.match (re); 

Be To (a oles 

A L123-456™"] 


个 表达 式 看 起 来 有 点 奇怪 。 我 们 可 以 使 用 \a 来 特 换 [0-9] ， 让 它 变 得 更 易 读 : 


Var strToMatch = '123-456-7890'; 

Var re =, /Nd\d\d=Nd\dNd/; 

var arrMatches = strToMatch.match (re); 
console.log(arrMatches); 
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//["123-456"] 


不 过 ， 你 很 快 会 发 现 还 有 更 好 的 方法 可 以 实现 类 似 的 效果 。 


3.4 重复 出 现 


迄今 为 止 , 我 们 已 经 学 习 了 如 何 匹配 固定 的 字符 或 数字 模式 。 但 大 多 数 时 候 ， 也 需要 处 理 某 
具有 重复 性 的 模式 。 举 例 来 说 ， 如 果 想 匹配 4 个 a， 那 么 可 以 写作 /aaaa/， 但 如 果 要 指定 一 个 
E 够 匹配 任意 数量 a 的 模式 ， 该 怎么 办 呢 ? 


正则 表达 式 提 供 了 各 式 各 样 的 重复 限定 符 。 重 复 限定 符 可 以 用 来 指定 茶 个 特定 的 模式 能 够 出 
现 多 少 次 。 我 们 可 以 指定 一 个 固定 的 值 (字符 应 该 出 现 n 次 )， 也 可 以 指定 可 变 的 值 (字符 至 少 出 
现 n 次 ， 至 多 出 现 m 次 )。 各 种 重复 限定 符 如 下 。 


口 ?: 出 现 0 次 或 1 次 〈 将 模式 视 为 可 选 的 ) 
口 *: 出 现 0 次 或 多 次 

口 +: 出 现 1 次 或 多 次 

口 {n}: 只 出 现 n 次 

口 {n，m}: 出 现 n 到 m 次 

口 tn，}: 至 少 出 现 n 次 

口 {，n}: 出 现 0 到 n 次 


在 下 面 的 例子 中 ， 我 们 创建 了 一 个 模式 ， 其 中 字符 u 是 可 选 的 〈 出 现 0 或 1 次 ): 


Var str = /behaviou?r/; 

console.log(str.test ("behaviour")); 

// true 

console.log(str.test ("behavior")); 

// true 

可 以 将 表达 式 /behaviou?r/ 读 作 “ 字 符 u 出 现 0 或 1 次 ”， 这样 有 助 于 理解 。 重 复 限定 符 要 紧 
跟 在 希望 出 现 重复 的 字符 后 面 。 再 来 看 一 个 例子 : 


console.log(/'\d+'/.test("'123'")); // true 


你 可 以 将 表达 式 '\a+' 理 解 为 :' 用 来 匹配 普通 字符 '，\d 用 来 匹配 字符 [0-9] ， 限 定 符 + 允 
许 重复 一 次 或 多 次 ，' 用 来 在 此 匹配 普通 字符 ' 。 


也 可 以 使 用 () 将 字符 表达 式 分 组 。 观 察 下 面 的 例子 : 








| 展 











Fal 












































var heartyLaugh = /Ha+(Ha+)+/i; 
console.log(heartyLaugh.test ("HaHaHaHaHaHaHaaaaaaaaaaa")); 
//true 
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让 我 们 将 上 面 的 表达 式 进行 分 解 来 理解 其 用 途 。 


口 H: 匹配 字符 的 字面 意义 

口 a+: 字符 a 出 现 1 次 或 多 次 

口 (: 表达 式 分 组 开始 

口 H: 匹配 字符 的 字面 意义 

口 a+: 字符 a 出 现 1 次 或 多 次 

口 ) : 表达 式 分 组 结束 

口 +: 表达 式 分 组 (Ha+ ) 出 现 1 次 或 多 次 
现在 , 分 组 的 用 法 应 该 更 清晰 了 。 如 果 需 要 解释 这 个 正则 表达 式 , 像 前 面 的 例子 中 那样 拆 开 
分 析 会 有 助 于 理解 。 

经 常 需要 将 一 系列 字母 或 数字 作为 整体 而 非 子 串 进行 匹配 。 这 种 做 法 相当 频繁 地 出 现在 需要 
匹配 独立 单词 (一 个 完整 的 单词 ,而 不 是 作为 其 他 单词 的 组 成 部 分 ) 的 时 候 。 可 以 使 用 \b 模 式 来 
指定 单词 边界 。\b 匹 配 的 是 这 样 一 个 位 置 : 一 边 是 单词 字符 ( 字母、 数字 或 下 划 线 )， 另 一 边 是 
非 单词 字符 。 

下 面 的 例子 是 一 个 简单 的 字面 匹配 。 如 果 cat 是 一 个 子 串 的 话 ， 也 能 够 成 功 匹 配 : 

console.log(/cat/.test('a black cat')); //true 


但 是 在 下 面 的 例子 中 , 我 们 在 单词 cat 之 前 使 用 \b 定 义 了 一 个 单词 边界 ， 也 就 是 说 待 匹配 的 
cat 必 须 是 一 个 完整 的 单词 ， 而 非 子 串 。 单 词 边界 出 现在 cat 之 前 ， 因 此 在 文本 a black cat 中 
能 够 找到 相应 的 匹配 : 


console.log(/\bcat/.test('a black cat')); //true 


如 果 我 们 将 相同 的 模式 用 于 单词 tomcat ， 这 次 就 没 法 匹配 了 ， 为 单词 tomcat 中 的 cat 前 
面 并 没有 单词 边界 : 


console.log(/\bcat/.test('tomcat')); //false 


单词 comcat 中 的 cat 后 面 有 一 个 单词 边界 ， 因 此 下 面 的 测试 能 够 成 功 匹配 : 






















































































console.log(/cat\b/.test('tomcat')); //true 


在 下 面 的 例子 中 ， 我 们 在 单词 cat 前 后 指定 了 单词 边界 ， 以 此 表明 cat 应 该 是 一 个 前 后 都 有 
边界 的 独立 单词 : 


console.log(/\bcat\b/.test('a black cat')); //true 


基于 同样 的 逻辑 ， 下 面 的 匹配 肯定 会 失败 » 因为 单词 concatenate 中 cat 的 前 后 并 没有 边界 : 























console.log(/\bcat\b/.test ("concatenate")); //false 
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exec () 方 法 在 获取 匹配 信息 方面 很 有 用 ， 因 为 它 会 返回 一 个 包含 匹配 信息 的 对 象 。exec () 
返回 的 对 象 有 一 个 index 属 性 ,可 以 告诉 我 们 成 功 匹 配 出 现在 字符 串 中 的 哪个 位 置 。 这 个 功能 在 
不 少 地 方 都 能 派 上 用 场 : 














Var match = /\d+/.exec("There are 100 ways to do this"); 
console.1log (match); 

| 

console.log(match.index); 

// 10 


选择 结构 


选择 结构 可 以 使 用 | ( 管道 符 ) 来 表示 。 例如 ，/alb/ 可 以 匹配 字符 a 或 bp, / (ab)+| (cd)+/ 
可 以 匹配 一 个 或 多 个 ap 或 cd。 








3.5 首部 与 尾部 

我 们 经 常 需要 确保 模式 在 字符 串 的 首部 或 尾部 进行 匹配 。 当 脱 字 符 (^ ) 用 作 正 则 表达 式 的 
第 一 个 字符 的 时 候 ， 可 以 将 匹配 过 程 锁定 在 字符 串 的 开头 ， 因 此 ，/^test/ 只 能 够 匹配 出 现在 待 
匹配 字符 串 起 始 位 置 上 的 test 子 串 。 与 此 类 似 , 美元 符号 ($ ) 表示 模式 必须 出 现在 字符 串 的 尾部 : 


/tests/。 


^ 和 $ 配 合 使 用 ， 表 明 指 定 的 模式 必须 涵盖 整个 待 匹配 的 字符 串 : /^test$/。 














3.6 向 后 引用 


表达 式 完成 求 值 之 后 , 每 一 个 分 组 所 匹配 的 内 容 都 会 被 保存 起 来 以 备 后 用 。 这 些 值 被 称 为 向 
后 引用 ( backreference )。 向 后 引用 是 按照 从 左 到 右 的 方向 , 依据 开 括号 的 先后 次 序 来 创建 并 编号 
的 。 你 可 以 将 向 后 引用 视 为 字符 串 中 已 经 成 功 匹 配 的 部 分 ， 这 些 部 分 对 应 着 正则 表达 式 中 的 项 


(term )。 


向 后 引用 可 以 写作 一 个 反 斜 杠 后 面 跟着 一 个 从 1 开始 的 编号 ， 用 于 引用 已 捕获 (匹配 ) 的 内 
容 ， 比 如 \1、\2 等 。 


比如 说 /^( [xYzZ])a\1/， 它 能 够 匹配 这 样 一 个 字符 串 : 以 X、Y、z 中 任意 字符 开头 ， 然 后 是 
字符 a， 接 着 是 第 一 个 分 组 中 捕获 的 内 容 。 这 和 / [xYz] a[xYz] /大 不 相同 。 在 前 者 中 ，a 后 面 的 
字符 不 能 是 任意 的 Xx、Y、z， 而 必须 与 之 前 所 匹配 的 第 一 个 字符 相同 。 向 后 引用 同 String 对 象 的 
replace() 方 法 配合 使 用 的 时 候 ， 需 要 用 到 特殊 的 字符 序列 $1 、s$2 等 。 假 如 你 想 将 字符 串 1234 
5678 更 改 成 5678 1234， 可 以 使 用 下 面 的 代码 : 










































































图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 


64 第 3 章 ”数据 结构 及 相关 操作 





Var Orig :T1234 S68 

Var. Te =/ NG (CNQTL43 

var modifiedStr = orig.replace(re, "$2 $1"); 
console.log (modifiedStr); // 输出 "5678 1234" 


本 例 中 的 正则 表达 式 有 两 个 分 组 ， 每 组 包含 4 个 数字 。 在 replace () 方 法 的 第 二 个 参数 中 ， 
$2 等 于 5678，$1 等 于 1234， 和 其 出 现在 模式 中 的 次 序 相 对 应 。 





3.7 ” 贪 禁 限定 符 与 惰性 限定 符 


到 目前 为 止 , 我 们 所 讨论 的 所 有 限定 符 都 是 贪 焚 性 质 的 。 贪 禁 限 定 符 针对 整个 字符 串 进行 匹 
配 。 如 果 没 有 发 现 匹 配 ， 它 会 删除 字符 串 的 最 后 一 个 字符 ,然后 再 尝试 匹配 。 如 果 还 没 匹 配 ,再 
删除 最 后 一 个 字符 ， 这 个 过 程 一 直 重 复 ， 直 到 出 现 匹 配 或 是 字符 串 已 经 变 成 空 串 。 
























































例如 ， 模 式 \q+ 能 够 匹配 一 个 或 多 个 数字 。 如 果 字 符 串 是 123 的 话 ， 贪 焚 匹 配 可 以 匹配 到 1、 
12 和 123。 贪 焚 模 式 h.+1 可 以 匹配 字符 串 hello 中 的 hell- 一 这 是 能 够 匹配 的 最 长 的 字符 串 。 
因为 \a+ 是 贪 焚 匹 配 ， 所 以 它 会 尽 可 能 多 地 匹配 数字 ， 故 最 后 的 匹配 结果 就 是 123。 





















































与 贪 禁 限 定 符 相 反 , 惰性 限定 符 则 是 尽 可 能 少 地 匹配 字符 。 可 以 在 正则 表达 式 后 面 加 上 问号 
(? )， 使 其 成 为 惰性 匹配 。 惰 性 模式 h. ?1 可 以 匹配 字符 串 hello 中 的 hel 一 一 这 是 能 够 匹配 到 的 
最 短 的 字符 串 。 


























模式 \w*?x 可 以 匹配 到 0 个 或 多 个 单词 以 及 一 个 x。 但 是 * 后 的 ?表示 应 该 尽 可 能 少 地 匹配 字 
符 。 对 于 字符 串 abcXXX， 匹 配 结果 可 以 是 abcX、abcXX 或 abcXXX， 那 究竟 应 该 匹配 哪 一 个 呢 ? 
因为 *? 是 惰性 模式 ， 所 以 应 该 尽 可 能 少 地 匹配 ， 因 此 最 后 的 匹配 结果 是 abcx。 



































有 了 这 些 必 备 知识 ， 让 我 们 来 尝试 利用 正则 表达 式 解 决 一 些 常见 的 问题 。 




















加 除 字符 串 首尾 多 余 的 空白 字符 是 一 个 极其 常见 的 用 法 。 直 到 最 近 ，String 对 象 本 身 都 没有 
trim() 方 法 ,一 些 JavaScript 库 为 没有 string.trim() 方 法 的 旧 浏 览 器 提供 了 字符 串 修 剪 功能。 
最 常用 的 方法 如 下 所 示 : 





function trim(str) { 














return (str || "").replace(/^\st+|l\s+$/g, ""); 
} 
console.log("--"+trim(" test ")+"-—"); 
//"--test-—" 
如 果 我 们 想 把 重复 的 空白 字符 蔡 换 成 单个 呢 ? 
re=/\s+/9g; 
console.log('There are ,Fok of spaces'.replace(re,' ')); 


//"There are a lot of spaces" 
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在 上 面 的 代码 片段 中 ， 我 们 尝试 匹配 一 个 或 多 个 空格 字符 序列 ， 然 后 将 其 替换 成 单个 空格 。 


如 你 所 见 ， 正 则 表达 式 就 像 是 JavaScript 兵 器 库 中 的 一 把 瑞士 军刀 。 从 长 远 来 看 ， 细 心 学习 、 
充分 实践 ， 将 为 你 之 来 丰厚 的 长 期 回报 。 





3.8 数组 


数组 是 值 的 有 序 集合 。 可 以 使 用 名 称 和 索引 来 引用 数组 元 素 。 在 JavaScript 中 , 有 三 种 创建 数 
组 的 方法 : 


了 二 下 








new Array (1,2,3); 
APTYay til, 2 3)3 
EL 2531] 
如 果 指 定 了 值 , 数组 就 使 用 这 些 值 作为 元 素来 初始 化 。 数 组 的 length 属 性 等 于 参数 的 个 数 。 
中 括号 语法 称 为 数组 字面 量 。 由 于 写法 简短 ， 因 而 成 为 初始 化 数组 的 首选 方法 。 
如 果 你 想 使 用 单个 值 为 数字 的 元 素 初始 化 数组 ,就 必须 使 用 数组 字面 量 语 法 。 如 果 将 单个 数 
字 值 传 给 Array () 构造 函数 或 子 数 ，JavaScript 会 将 这 个 数字 作为 数组 的 长 度 ， 而 非 单个 元 素 : 
Var drr L103 
Var arr = Array (10); // 创建 一 个 没有 实际 元 素 的 数组 ， 将 arr .length 设 为 10 
// 上 面 的 代码 等 价 于 


Var arr = [J] 
arr.length = 10; 


JavaScript 没 有 专门 的 数组 类 型 。 不 过, 你 可 以 在 程序 中 利用 预定 义 的 Array 对 象 及 其 方法 来 
使 用 数组 。aArray 对 象 的 方法 能 够 以 各 种 方式 处 理 数组 ， 例 如 合并 、 反 转 以 及 排序 。 另 外 ,， 它 有 
一 个 属性 可 以 用 来 确定 数组 的 长 度 ， 还 有 其 他 一 些 属性 可 以 配合 正则 表达 式 使 用 。 


可 以 通过 给 元 素 赋值 来 填充 数组 : 


Var arr 


Yar arE 






































var days = []; 
days{[0] = "Sunday ™ 
days[1] = "Monday"; 


也 可 以 在 创建 数组 的 时 候 填 充 : 


Var arr_generic = new Array ("A String", myCustomValue, 3.14); 
Var fruits = ["Mango", "Apple", "Orange"] 


在 大 多 数 语言 中 ， 要 求 数组 所 有 元 素 的 类 型 必须 相同 。JavaScript 人 允许 数组 中 包含 各 种 类 型 
的 值 : 


a i 下 
'string', 42.0, true, false, null, undefinedqd, 
['sub', 'array'], {object: true}, NaN 


有 
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可 以 使 用 元 素 的 索引 来 引用 数组 元 素 。 举 例 来 说 ,假设 你 定义 了 以 下 数组 : 
Var days = ["Sunday", "Monday", "Tuesday"] 


可 以 使 用 colors [0] 来 引用 第 一 个 数组 元 素 ， 使 用 colors [11 来 引用 第 二 个 数组 元 素 。 元 
素 索引 从 0 开始 。 


JavaScript 在 内 部 是 将 数组 元 素 作为 标准 的 对 象 属性 来 存储 的 ， 数 组 索引 就 是 属性 名 。 属 性 
length 就 不 一 样 了 , 该 属性 的 返回 值 总 是 比 最 后 一 个 元 素 的 索引 多 1。 我 们 之 前 讲 过 ，JavaScript 
数组 索引 是 基于 0 的 : 索引 从 0 开始 ,而 不 是 从 1, 这 意味 着 1ength 属 性 值 要 比 存储 在 数组 中 最 高 
的 索引 值 还 要 大 1: 

var colors 


COLOrRSL30] .= 
console.logl(c 


你 也 可 以 给 length 属 性 赋值 。 如 果 赋 予 的 值 小 于 数组 元 素 个 数 , 数组 会 被 截断 ; 赋值 0 的 话 ， 


会 清空 整个 数组 : 



























































[3 
['Green']; 
olors.length); // 31 








Var colors = ['Red', 'Blue', 'Yellow']; 
console.log(colors.length); // 3 
colors.length = 2; 


console.log(colors); // ["Red","Blue"] - Yellow 已 经 被 删除 了 
colors.length = 0; 
console.log(colors); // [] colors 数 组 为 空 


colors.length = 3; 
console.log(colors); // [undefined, undefined, undefined] 


如 果 查 询 的 数组 索引 不 存在 ， 会 返回 undefined。 
一 个 常见 操作 是 迭代 整个 数组 ， 处 理 每 个 元 素 。 最 简单 的 做 法 如 下 : 


var colors ['red', 'green', 'blue']; 
fo (Vag 汪 : 0; i < colors.length; i++) { 
console.log(colors[i]); 


} 
forEach() 方 法 提供 了 另 一 种 迭代 数组 的 方法 : 


Var colors = ['red', 'green', 'blue']; 
colors.forEach (function(color) { 
console.log(color); 


}); 


传递 给 forEach () 的 函数 会 针对 数组 中 的 每 一 个 元 素 执行 一 次 , 在 执行 过 程 中 , 当前 的 数组 
元 素 会 作为 参数 传人 给 该 函数 。forEach ( ) 循环 不 会 迭代 未 分 配 值 的 元 素 。 


Array 对 象 有 很 多 有 用 的 方法 ,方法 可 以 用 来 处 理 数 组 中 的 数据 。 
concat () 方 法 能 够 合并 两 个 数组 ， 并 返回 合并 后 的 新 数组 : 
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var myArray = new Array ("33", "44", "55");} 
mArray = mArray .eoncat ("3,2 LY 
console.log (myArray); 

PAA he se 2 Ee ot | 


join () 方 法 能 够 将 数组 的 所 有 元 素 合 并 成 一 个 字符 串 。 这 个 方法 可 用 于 处 理 列表 。 默 认 的 
分 隔 符 是 逗号 (，): 

Var myArray = new Array('Red','Blue','Yellow'); 

Var list = myArray.join(" ~ "); 


console.log(list); 
//"Red ~ Blue ~ Yellow" 


pop () 方 法 能 够 删除 数组 最 后 一 个 元 素 并 将 其 返回 。 它 类 似 于 栈 的 pop () 方 法 : 





var myArray = new Array ("1", "2", "3"); 
var last = myArray .pop(); 
// myArray = ["1", "2"], last = "3" 


push () 方 法 能 够 在 数组 尾部 添加 一 个 或 多 个 元 素 ， 并 返回 最 终 的 数组 长 度 : 


var myArray = new Array ("1", "2"); 
myArray .push("3"); 
/7 yArray = [LY 2 37] 


shift () 方 法 能 够 删除 数组 第 一 个 元 素 并 将 其 返回 : 


Var mYyArray = new Array ("1 2, V3");, 
Var first = myArray.shift(); 
// myArray = ["2", "3"], first = "1" 


unshift () 方 法 能 够 在 数组 的 头 部 添加 一 个 或 多 个 元 素 ， 并 返回 数组 新 的 长 度 : 


Var myArray = Mew Array ("1 V2 3 "sy 
myArray .unshift("4", "5"); 
// myArray 运 : 本 me 和 2 | 





reverse() 方 法 能 够 反 转 或 者 说 颠倒 数组 元 素 一 一 第 一 个 数组 元 素 变 成 最 后 一 个 , 最 后 一 个 


人 
变 成 第 一 个 : 








Var myArray = new Array ("1", "2", "3"); 
myArray .reverse(); 
// 显 倒 数组 ， 因 此 myArray = [ "3"，"2"，"1" ] 


sort () 方 法 能 够 对 数组 元 素 进 行 排序 : 


var myArray = new Array ("A", "C", "B"); 
myArray.sort (); 
// 对 数组 排序 ， 因 此 myArray = [ "A","B","c" ] 





sort () 方 法 使 用 一 个 可 选 的 回调 函数 来 定义 如 何 比较 元 素 。 该 函数 会 比较 两 个 元 素 并 返回 
三 个 值 中 的 一 个 。 我 们 来 学 习 下 面 的 函数 。 


图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 
































68 第 3 章 数据 结构 及 相关 操作 

D indexOf (searchElement[, fromIndex]): 在 数组 中 搜索 searchElement， 并 返回 
第 一 次 匹配 的 索引 。 
Var a = [Ln ge 'a', gt i 
console.log(a.indexOf ('b')); // 1 
// 现在 再 从 上 一 次 匹配 位 置 开始 向 后 搜索 
console.log(a.indexOof ('b', 2)); // 3 
console.log(a.indexOf('1')); // -1, 'gq' is not found 

口 lastIndexOof (searchElement [，fromIndex] ): 和 indqexof () 方 法 类 似 ， 只 不 过 是 
从 后 向 前 搜索 。 
Var a = [ en ec Le 'a! eM| 
console.log(a.lastIndexOf('b')); // 5 
// 现在 再 从 上 一 次 匹配 位 置 开始 向 前 搜索 
console.log(a.lastIndexOf ('b', 4)); // 1 
console.log(a.lastIndexOf ('z')); // -1 





现在 我 们 已 经 深入 学 习 了 JavaScript 的 数组 ， 接 下 来 介 


























一 个 神奇 的 库 : Underscore.js 


























( http://underscorejs.org/ )。 De 程 辅 助 程序 ， 能够 让 你 的 
代码 更 加 清晰 和 也 数 化 。 

假设 你 已 经 熟悉 了 Node.js， 接 下 来 通过 npm 来 安装 Underscore.js: 

npm install underscore 

将 Underscore 安 装 成 Node 模 块 之 后 ,我 们 会 把 所 有 的 例子 放 到 一 个 js 文件 中 ,在 Nodejs 上 运 
行 该 文件 进行 测试 。 也 可 以 利用 Bower 来 安装 Underscore。 

就 像 jQuery 的 $ 模 块 ，Underscore 也 定义 了 一 个 _ 模 块 ， 你 可 以 通过 引用 该 模块 来 调用 所 有 的 


把 下 面 的 代码 输入 到 一 


Var _ 


个 文本 文件 中 ， 并 将 其 命名 为 test .js: 


require('underscore'); 

funcotion print{(n)t 
console.log(n);} 

} 

_.each([1, 2, 3], print); 

// 打印 出 1 2 3 


不 使 用 underscore 库 的 each () 


var myArray [rd 

Var arrayLength = myArray.length; 

for (var i 0; i < arrayLength; 
console.log (myArray [i]); 


} 
在 这 里 所 看 到 的 就 是 一 种 强大 的 函数 式 构建 方式 ， 它 使 


， 上 面 的 代码 可 以 写成 这 样 : 


i++) { 
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方法 显然 太 虽 呈 了 ， 很 多 语言 ( 如 Java ) 都 因此 受到 诉 病 。 这 些 语言 如 今 也 在 逐步 地 接受 函数 式 
范式 。 作 为 一 名 JavaScript 程 序 员 ， 重 要 的 是 要 尽 可 能 地 将 这 些 理解 融入 自己 的 代码 中 。 


前 面 例子 中 的 each () 函数 对 一 系列 元 素 进行 近代， 将 每 个 元 素 依次 交 给 迭代 函数 。 每 次 调 
用 从 代 函数 的 时 候 都 会 传人 三 个 参数 ( 元素、 索引 以 及 列表 )。 在 上 例 中 ，eacn () 函数 对 数组 
[1,2,3] 进 行 迭代 ， 对 数组 中 的 每 个 元 素 调用 print 函 数 ， 并 将 数组 元 素 作 为 参数 传人。 这 是 对 
传统 数组 遍历 方式 的 一 种 替代 。 


range () 函数 能 够 创建 一 个 整数 列表 。 如 果 忽 略 起 始 值 的 话 ， 则 默认 为 0， 步 长 默认 为 1。 如 
果 你 想 生 成 负数 区 间 ， 可 以 将 步 长 设 为 负数 : 


Var _ = require('underscore'); 
console.log(_.range(10)); 

A OG -2 NG TN ,9 
console.log(_.range(1, 11)); 

J .Dy yd: A 6 By Oi 
console.log(_.range(0, 30, 5)); 

A QF 5 LOvrLis. 20 23] 
console.log(_.range(0, -10, -1)); 























[0 



































Pe ee Ee te ee | 

console.log(_.range(0)); 

//[] 

range () 默认 使 用 整数 来 填充 数组 ， 不 过 要 点 小 手段 的 话 ， 也 是 可 以 用 其 他 数据 类 型 的 : 
console.log(_.range(3) .map(function () { return 'a' }) ); 

kE Yat va ta ] 

















用 这 种 方法 创建 并 初始 化 数组 , 既 快 速 又 方便 。 放 在 以 前 , 这 通常 都 是 用 传统 的 循环 来 实现 的 。 


map () 利 用 转换 函数 (transformation function ) 来 映射 列表 中 的 每 一 个 值 ， 从 而 生成 一 个 新 
的 数组 。 考 虑 下 面 的 例子 : 


Var _ = require('underscore'); 
console.log(_.map([1, 2, 3], function(num){ return num * 3; })); 
/4 [L369] 


reduce() 函数 能 够 将 一 系列 值 归 约 成 单个 值 。 初 始 状 态 由 和 迭代 函数 传人 ,后续 的 每 一 步 也 
由 迭代 函数 返回 。 下 面 的 例子 给 出 了 reduce () 的 用 法 : 


Var _ = require('underscore'); 
Var sum = _.reduce([1, 2, 3], function(memo, num) { 
console.log (memo,num) ;return memo + num; }, 0); 


console.1log (sum); 


在 本 例子 中 ，console.1og (memo，num) 只 是 为 了 清晰 地 展示 概念 而 已 。 代 码 输出 如 下 : 




















OWPO 
OD 
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最 终 的 结果 是 1+2+3 之 和 ， 也 就 是 6。 如 你 所 见 ， 有 两 个 值 被 传人 了 迭代 函数 。 一 次 达 
代 中 ， 调 用 迭代 函数 时 使 用 了 两 个 值 (0,1) 一 一 在 调用 reduce ( | 
1 就 是 列表 中 第 一 个 元 素 的 值 。 在 函数 中 ， 我 们 对 memo 和 num 求 和 ， 然 后 返回 中 间 变 量 sum， 该 
变量 将 作为 memo 参 数 ， 由 函数 iterate() 使 用 一 -memo 中 最 后 包含 的 就 是 累计 的 sum。 这 个 概 
念 对 于 理解 如 何 用 中 间 状 态 来 计算 出 ER 


filter() 函数 会 对 整个 列表 进行 迭代 , 并 返回 一 个 由 所 有 通过 条 件 测试 的 元 素 组 成 的 数组 。 
来 看 下 面 的 例子 : 


var = require('underscore'); 


Var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); 
console.log(evens); 


filter () 因数 的 迭代 郴 数 返回 一 个 真 值 。 最 终 的 sevens 数 组 中 包含 了 满足 测试 条 件 的 所 有 
元 素 。 


和 filter() 函数 功能 相反 的 是 reject () 函数 。 从 名 字 中 就 可 以 看 出 , 该 函数 会 对 列表 进行 
和 迭代， 并 忽略 满足 测试 条 件 的 所 有 元 素 : 















































Var _ = require('underscore'); 

Var odds = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0;}); 
console.1log(odds); 

PA i ee S| 








我 们 使 用 的 代码 和 前 一 个 例子 中 的 一 样 , 只 不 过 是 把 filter () 换 成 了 reject ()，, 而 结果 下 
好 相反 。 


contains () 是 个 挺 有 用 的 小 函数 ， 如 果 某 个 值 存 在 于 列表 中 , 它 会 返回 true， 否 则 就 返回 


false: 





Var _ = require('underscore');} 
console.log(_.contains([1, 2, 3], 3)); 
//true 


invoke() 是 一 个 非常 有 用 的 函数 ， 我 已 经 渐渐 爱 上 它 了 。 该 函数 会 针对 列表 中 的 每 个 元 素 
调用 一 个 特定 的 函数 。 打 从 知道 invoke () 起 , 我 都 不 知道 自己 用 过 多 少 次 了 。 来 看 下 面 的 例子 : 


Var _ = require('underscore'); 
console Jog(.-. invoket( [Sy 1 31 [3 -2 LT]l SSoOrET)): 
A el By. 2 让 





在 这 个 例子 中 ， 对 数组 中 的 每 个 元 素 都 调用 了 Array 对 象 的 sort () 方 法 。 注 意 , 下 面 的 写 
法 是 不 行 的 : 


var _ = require('underscore'); 


consoleé,log(_ .invoke(["new"; "old","cat™]l, "sort")),; 
//[ undefined, undefined, undefined | 
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这 是 因为 sort 方 法 并 不 是 String 对 象 的 一 部 分 。 这 样 写 就 没 问 题 : 


Var _ = require('underscore'); 
console.log(_.invoke(["new","old","cat"], 'toUpperCase')); 
A NEW, OLD CAT 

















这 是 因为 LoUppercase () 是 String 对 象 的 方法 ,列表 中 所 有 的 元 素 也 都 是 String 类 型 。 
unig() 函数 会 删除 原始 数组 中 所 有 重复 的 元 素 ， 并 返回 该 数组 : 








Var _ = require('underscore'); 

Var uniqArray = _.uniq([1l,1,2,2,3]); 
console.log (unigqArray); 

RL 3 





partition() 水 数 能 够 将 数组 一 分 为 二 : 其 中 一 个 数组 中 的 元 素 都 能 够 满足 谓词 ( predicate )， 
不 能 满足 的 都 在 另 一 个 数组 中 
Var _ = require('underscore'); 
function isOdd(n)t{ 
return n%2==0; 
} 


console.log(_.partition([0, 1, 2, 3, 4, 5], is0dd)); 
LE 0 2 ds re 8) 


compact () 返回 一 个 数组 的 副本 ， 其 中 不 包括 所 有 的 假 值 ( false、null、0、""、undefined 
和 NaN ): 


console.log(_.compact ([0, 1, false, 2, '', 3])); 


这 上段 代码 会 删除 所 有 的 假 值 , 返回 一 个 包含 了 元 素 [1, 2,31 的 新 数组 一 一 该 方法 有 助 于 从 列 
表 中 消除 会 造成 运行 时 异常 的 值 。 

without () 函数 会 返回 一 个 删除 了 所 有 指定 值 的 数组 的 副本 : 

Var _ = require('underscore'); 


CoOnNnsole.l65(.. .without 人 [IT 273, 4.5y6)778,9,.00%132505 00.13L]y00.1,.2)); 
人 


3.9 map 





ECMAScript 6 引入 了 map。map 是 一 个 简单 的 键 值 映 射 ， 可 以 依据 元 素 的 插入 顺序 进行 迭代 。 
下 面 的 代码 片段 展示 了 Map 类 型 的 一 些 方法 及 其 用 法 : 





Var founders = new Map(); 


founders.set ("facebook", "mark"); 
founders.set ("google", "larry"); 
founders.size; // 2 

founders.get ("twitter"); // undefined 
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founders.has ("yahoo"); // false 


for (var [key, value] of founders) { 
console.log(key + " founded by " + value); 

} 

// "facebook founded by mark" 

// "google founded by larry" 


3.10 set 





ECMAScript 6 引入 了 set。set 是 值 的 集合 ， 可 以 依据 其 插入 顺序 进行 迭代 。set 的 一 个 重要 特 





点 就 是 其 中 的 值 只 能 出 现 一 次 。 


下 面 的 代码 片段 展示 了 set 的 一 些 基 本 操作 : 


Var mySet = new Set(); 
mySet .add (1); 
mySet .add ("Howdy"); 
mySet.add("foo"); 


mySet.has(1); // true 
mySet.delete("foo"); 
mySet.size; // 2 


for (let item of mySet) console.log(item); 

XA. 

// "Howdy" 

我 们 简要 地 讨论 过 ，JavaScript 的 数组 并 非 传 统 意义 上 的 数组 。 在 JavaScript 中 ， 数 组 作为 对 
具备 以 下 特点 : 





口 length 属 性 
口 从 Array .prototype 处 继承 函数 (将 在 下 一 章 中 讨论 ) 
口 对 数字 类 型 的 键 会 做 特殊 人 处理 


当 我 们 将 数组 索引 写成 数字 时 ， 索 引 会 被 转换 成 字符 串 














arr[0] 在 内 部 会 变 成 


六 


arr["0"]。 因 此 ， 在 使 用 JavaScript 数 组 时 ， 有 几 件 事 要 注意 。 




















口 通过 索引 访问 数组 元 素 并 不 像 在 C 语 言 中 那样 是 一 种 常数 时 间 操 作 。 因 为 数组 实际 上 就 是 
键 值 的 映射 ， 所 以 具体 的 访问 要 依赖 于 映射 的 分 布 layout ) 及 其 他 因素 ( 冲突 等 )。 

口 JavaScript 数 组 是 稀 琉 的 (大 部 分 元 素 都 有 默认 值 ) 这 意味 着 数组 中 可 以 存在 间 际 。 要 理 
解 这 一 点 ， 请 看 下 面 的 代码 片段 : 


Var testArr=new Array (3); 
console.log (testArr); 
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你 会 看 到 输出 结果 是 [undefined, undefined, undefined] undefined 是 数组 





元 素 的 默认 值 。 
考虑 这 个 例子 : 
Var testArr=[]; 
testArr[3] = 10; 
testArr[10] = 3; 


console.log(testArr); 


// [undefined, undefined, undefined, 10, undefined, undefined, undefined, undefined, 
undefined, undefined, 3] 


可 以 看 到 数组 中 存在 着 一 些 间隙 。 只 有 两 个 元 素 有 具体 的 内 容 ， 其 他 的 都 是 包含 默认 值 的 sen 


间隙。 了 解 这 一 点 是 有 好 处 的 。 使 用 for. . . in 循环 迭代 数组 会 出 现 意 想不到 的 结果 。 看 下 面 的 
例子 : 
































Var B: = [0]; 

Sa /Si 

for (var i=0; i<a.length; i++) { 
console.log(a[i]); 

} 

// 对 索引 0 到 5 的 元 素 进行 选 代 


// [undefined,undefined,undefined,undefined,undefined,5] 


for (var x in a) { 
console.1log (x); 

} 

// 只 显示 索引 为 5 的 元 素 ， 忽 略 索引 0-4 


3.11 编码 风格 
和 之 前 一 样 ， 我 们 来 花 点 时 间 讨 论 一 下 创建 数组 时 的 写法 。 
口 使 用 字面 量 语法 创建 数组 : 





// 不 建议 

const items = new Array(); 
// 建议 

const items = []; 





口 使 用 数组 的 push () 方 法 添加 数组 元 素 ， 而 不 是 选择 直接 赋值 : 


const stack = []; 

// 不 建议 

stack[stack.length] = 'pushme'; 
// 建议 

stack.push('pushme'); 
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3.12 ”小结 


随 着 JavaScript 语 言 的 成 熟 ， 其 工具 链 也 变 得 愈 发 稳健 和 高 效 ， 很 少 看 到 编程 老手 不 用 
Underscore.js 这 种 库 。 随 着 学 习 的 深入 ， 我 们 会 继续 探索 更 多 功能 强大 的 库 ， 在 它们 的 帮助 下 ， 
你 的 代码 会 变 得 更 紧凑 、 可 读 性 更 好 、 人 性 能 更 高 。 我 们 学 习 了 正则 表达 式 一 一 JavaScript 中 的 头等 
对 象 。 一 旦 理解 了 RegExp ， 就 会 发 现 多 使 用 它 ， 能 够 让 你 的 代码 更 简洁 。 在 下 一 章 中 ， 我 们 将 
学 习 JavaScript 中 Object 的 写法 及 其 原型 继承 的 来 龙 去 脉 , 并 将 后 者 作为 一 种 审视 面向 对 象 编程 的 
全 新 方式 。 
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第 4 章 


面向 对 象 的 JavaScript 








JavaScript 最 基本 的 数据 类 型 是 Object。JavaScript 对 象 可 视 为 可 修改 ( mutable ) 的 键 值 集合 。 
在 JavaScript 中 , 数组、 函数 和 正则 表达 式 都 是 对 象 ， 而 数字 、 字 符 串 和 布尔 值 则 为 类 似 于 对 象 的 
语言 构件 ， 它 们 不 可 修改 ， 但 是 拥有 方法 "。 本 章 将 学 习 以 下 主题 : 


口 理解 对 象 

口 实例 属性 与 原型 属性 
口 继承 

口 接收 需 与 设置 器 












































4.1 理解 对 象 


在 开始 学 习 JavaScript 如 何 处 理 对 象 之 前 , 有 必要 先 讨 论 一 下 面向 对 象 范式 。 与 大 多 数 编程 范 
式 一 样 ,面向 对 象 编程 (OOP ) 也 是 源 于 复杂 性 管理 的 需要 。 其 主要 理念 是 将 整个 系统 划分 成 规 
模 更 小 的 部 分 , 各 部 分 之 间 彼 此 独立 。 如 果 这 些 较 小 的 部 分 能 够 尽 可 能 多 地 隐藏 实现 细节 , 它们 
就 会 变 得 易于 使 用 。 有 一 个 关于 汽车 的 经 典 比喻 有 助 于 你 理解 OOP 这 一 极为 重要 的 概念 。 


当 芍 驶 一 辆 汽车 时 ， 你 操作 的 是 接口 一 一 方向 盘 、 离 合 右 、 和 刹车、 油门 。 你 只 能 通过 这 些 接 
口 开 操作 这 辆 车 ; 有 了 它们 , 我 们 才能 驾驶 这 辆 汽车 。 接 口 实际 上 隐藏 了 所 有 真正 驱动 汽车 的 复 
杂 系统 ， 例 如 引擎 的 内 部 功能 、 电 子 系统 等 。 作 为 一 名 司机 ， 这 些 复杂 性 不 用 你 来 操心 。OOP 
的 主要 驱动 力 类 似 于 此 。 对 象 隐藏 了 特定 功能 复杂 的 实现 细节 ， 只 向 外 部 暴露 有 限 的 接口 ,其 他 
系统 可 以 使 用 这 些 接口 而 无 需 关 注 内 部 所 隐藏 的 复杂 性 。 另 外 ,对 象 通常 会 隐藏 内 部 状态 ， 避免 
其 他 对 象 直接 修改 。 这 就 是 OOP 的 要 点 。 


在 大 型 系统 中 , 大 量 的 对 象 调 用 其 他 对 象 的 接口 。 如 果 你 允许 它们 修改 对 方 的 内 部 状态 , 那 
可 就 麻烦 了 。OOP 的 操作 是 这 样 的 : 对 象 的 状态 对 于 外 部 而 言 是 隐藏 的 ， 只 能 够 通过 受 控 的 接口 































































































Q@ 实际 上 ,具有 方法 的 应 该 是 这 些 原始 类 型 所 对 应 的 包 庄 对 象 ( wrapper object ), 参 见 OReilly 出 版 社 的 JavaScript: The 
Definitive Guide 第 6 版 中 的 3.6 节 “Wrapper Objects”。 一 一 译 者 注 
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OOP 是 一 个 重要 的 概念 ， 较 传统 的 结构 化 编程 而 言 的 确 是 一 种 进步 。 然 而 , 很 多 人 觉得 OOP 
做 得 过 头 了 。 大 多 数 OOP 系 统 都 定义 了 复杂 且 毫 无 必要 的 类 和 类 型 的 继承 。 另 一 个 重大 的 缺陷 是 
推崇 状态 的 隐藏 ，OOP 认 为 对 象 的 状态 基本 上 无 足 轻重 。 尽 管 OOP 相 当 流 行 , 但 在 很 多 领域 ， 其 
缺点 也 是 一 目 了 然 的 。 当 然 , OOP 的 有 些 理念 还 是 挺 不 错 的 ,尤其 是 隐藏 复杂 性 、 只 向 外 部 暴露 
接口 。JavaScript 汲 取 了 一 些 有 益 的 概念 , 并 围绕 其 建立 了 自己 的 对 象 模型 。 幸 运 的 是 , 这 个 设计 
决定 使 得 JavaScript 对 象 神通 广大 。“ 四 人 组 ”( Gang of Four ) “在 其 重要 著作 《设计 模式 : 可 复 用 
的 面向 对 象 软件 基础 》 中 ， 提 出 了 更 好 的 面向 对 象 设计 的 两 条 基本 原则 : 




























































































口 针对 接口 编程 ， 而 非 实现 (Program to an interface and not to an implementation ) 
口 对 象 的 组 合 优 于 类 的 继承 ( Object composition over class inheritance ) 


这 两 个 概念 的 确 与 典型 的 OOP 运 作 方 式 背 道 而 驰 。 继承 的 典型 操作 方式 就 是 基于 继承 , 将 父 
类 暴露 给 所 有 的 子 类 。 在 典型 的 继承 中 , 子 类 和 父 类 是 紧密 耦合 在 一 起 的 。 有 一 些 机 制 能 够 在 一 
定 程 度 上 解决 这 个 问题 。 如 果 你 是 在 Java 中 使 用 这 种 典型 的 继承 方式 ， 通 常 建议 针对 接口 编程 ， 
而 非 实现 。 在 Java 中 ， 可 以 使 用 接口 来 编写 解 耘 代码: 


// 对 List 接 口 编程 ， 而 非 针 对 ArrayList 实 现 
List theList = new ArrayList(); 


我 们 不 针对 具体 的 实现 编程 ， 而 是 执行 以 下 操作 : 












































ArrayList theList = new ArrayList(); 


如 何 对 接口 编程 ”在 对 List 接 口 编程 的 时 候 ， 你 只 能 够 调用 List 接 口 可 用 的 方法 ， 
ArrayList 的 特定 方法 是 没 法 调用 的 。 针 对 接口 编程 能 够 让 你 自由 地 改变 自己 的 代码 ， 并 使 用 
List 接 口 的 任何 其 他 特定 子 接口 。 例 如 ， 我 可 以 修改 我 的 实现 ,使 用 LinkegList 而 非 
ArrayList,o 你 可 以 修改 变量 来 使 用 LinkedList: 
























































List theList = new LinkedList(); 


这 种 方法 的 优美 之 处 在 于 ， 就 算 你 在 程序 中 的 100 个 地 方 使 用 了 List， 也 不 用 担心 得 去 修改 
所 有 位 置 上 的 实现 。 当 你 跨行 了 “针对 接口 编程 ， 而 非 实现 ”的 原则 时 ， 就 能 够 写 出 松 斐 合 的 代 
码 了 。 在 使 用 典型 的 继承 方式 时 ， 这 是 一 个 重要 的 原则 。 

在 典型 继承 中 还 有 一 处 限制 : 只 能 在 父 类 的 限制 下 增强 子 类 。 你 没 法 从 根本 上 改变 从 祖先 那 
里 继承 来 的 东西 ， 这 就 无 法 实现 重用 了 。 典 型 的 继承 还 有 如 下 两 个 问题 。 


口 继承 导致 了 紧 耦 合 。 子 类 明 悉 他 们 的 祖先 ， 这 就 使 得 子 类 与 其 父 类 紧 紧 耦合 在 一 起 。 

































































“四 人 组 ” 指 的 是 《设计 模式 》 一 书 的 四 名 作者 : Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides。 
译 者 注 
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口 当 从 父 类 中 生成 子 类 时 ， 你 没有 选择 继承 什么 、 不 继承 什么 的 权利 。Erlang 之 父 Joe 
Armstrong 对 此 有 一 段 论述 , 非常 好 地 解释 了 这 种 情形 :“ 面 向 对 象 语言 的 问题 在 于 其 自身 
就 已 经 包含 并 携带 了 全 部 的 隐 含 环境 。 你 要 的 是 一 根 香 礁 ， 得 到 的 却 是 拿 着 香 巷 的 大 猩 
猩 以 及 整 片 从 林 。” 









































4.1.1 JavaScript 对 象 的 行为 

有 了 这 些 背 景 知识 , 现在 让 我 们 来 探究 JavaScript 对 象 的 行为 方式 。 从 广义 上 来 说 ,一 个 对 象 
可 以 包含 属性 ， 属性 被 定义 为 键 值 对 。 属 性 的 键 ( 名称 ) 可 以 是 一 个 字符 串 ， 值 可 以 是 任何 有 效 
的 JavaScript 值 。 可 以 使 用 对 象 的 字面 形式 来 创建 对 象 。 下 面 的 代码 片段 展示 了 如 何 创建 对 象 : 












































var nothing = {}; 


Var euthors: 半 
"firstname": "Douglas", 
"Jastname": "Crockford" 


上 

属性 名 可 以 是 任意 的 字符 串 或 空 串 。 如果 属性 名 是 合法 的 JavaScript 名 称 的 话 , 可 以 省 略 其 周 
围 的 引号 。 因 此 , 对 于 first-name 来 说 , 引号 是 必需 的 ; 对 于 firstname 来 说 , 引号 是 可 选 的 。 
去 号 用 于 分 隔 键 值 对 。 对 象 也 可 以 般 套 : 


















































var author = { 
firstname : "Douglas", 
Jastname : "Crockford", 
book : { 
title:"JavaScript- The Good Parts", 
pages:"172" 


} 
上 
访问 对 象 属性 有 两 种 写法 : 一 种 写法 类 似 于 访问 数组 元 素 ， 另 一 种 使 用 点 号 。 在 第 一 种 写法 
中 ， 需 要 将 一 个 字符 串 表 达 式 放 和 人 [] 中 来 获取 对 象 属性 值 。 如 果 表 达 式 是 一 个 有 效 的 JavaScript 
名 称 的 话 ， 也 可 以 使 用 点 号 写法 ， 这 种 写法 是 检索 属性 值 的 首选 : 






































console.log(author['firstname']); //Douglas 
console.log(author.lastname); //Crockford 
console.log(author.book.title); // JavaScript- The Good Parts 








如 果 试 图 检索 一 个 不 存在 的 属性 ， 会 导致 undefined 错 误 : 
console.log(author.age); 

在 这 种 情况 下 ， 一 个 技巧 是 使 用 | | 操作 符 来 填充 默认 值 : 
console.log(author.age 


你 可 以 给 属性 赋 以 新 值 来 更 新 对 象 : 





"No Age Found"); 
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author.book.pages = 190; 
console.log(author.book.pages); //190 


仔细 观察 ， 会 发 现 对 象 的 字面 形式 语法 和 JSON 格 式 很 像 。 
方法 是 一 个 具有 函数 值 的 对 象 的 属性 : 





var meetingRoom = {}; 

meetingRoom.book = function(roomId)t{ 
console.log("booked meeting room -"+roomId); 

3 

meetingRoom.book ("VL"); 


4.1.2 ”原型 


除了 我 们 添加 给 对 象 的 属性 之 外 ， 几 乎 所 有 的 对 象 都 有 一 个 叫 作 prototype 的 默认 属性 。 如 果 
对 象 没 有 所 请 求 的 属性 ，JavaScript 会 到 原型 中 去 查找 。opbject .getPrototypeof () 方 法 会 返 
回 对 象 的 原型 。 


很 多 程序 员 认 为 原型 与 对 象 的 继承 紧密 相关 一 一 这 的 确 是 定义 对 象 类 型 的 一 种 方法 一 一 但 
从 根本 上 而 言 ， 与 原型 密切 相关 的 是 函数 。 


原型 是 定义 能 够 被 对 象 实例 所 使 用 的 属性 和 函数 的 一 种 方式 。 原型 的 属性 最 终 会 成 为 对 象 实 
例 的 属性 。 原型 可 视 为 对 象 创建 的 模板 , 它 类 似 于 面向 对 象 语言 中 的 类 。JavaScript 中 的 原型 可 用 
来 编写 典型 的 面向 对 象 代码 以 及 模拟 典型 的 继承 形式 。 让 我 们 回顾 一 下 先前 的 例子 : 










































































var author = (}; 
author.firstname = 'Douglas'; 
author.lastname = 'Crockford'; 





在 上 面 的 代码 片段 中 , 我 们 创建 了 一 个 新 对 象 并 分 别 赋予 其 属性 。 你 很 快 就 会 意识 到 ,这 并 
不 是 一 个 创建 对 象 的 标准 方法 。 如 果 你 对 OOP 有 所 了 解 ， 就 会 发 现 这 里 既 没 有 封装 ,也 没有 通常 
的 类 结构 。JavaScript 对 此 有 相应 的 解决 方法 。 可 以 使 用 new 操 作 符 ， 通 过 构造 函数 来 实例 化 一 个 
对 象 。 不 过 ,在 JavaScript 中 并 没有 类 的 概念 ， 另 外 要 注意 的 是 new 操 作 符 是 应 用 于 构造 函数 的 ， 
这 一 点 很 重要 。 为 了 清楚 地 理解 这 一 点 ， 让 我 们 来 看 看 下 面 的 例子 : 
// 一 个 什么 都 不 返回 ， 也 什么 都 不 创建 的 函数 
function Player() {} 
// 向 该 也 数 的 prototypPe 属 性 中 添加 一 个 函数 
Player.prototype.usesBat = function() { 


return true; 


} 














// 以 函数 的 形式 调用 player () ， 以 证 明 什么 都 不 会 发 生 

Var crazyBob = Player(); 

if(crazyBob === undefined)f{ 
console.log("CrazyBob is not defined"); 
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} 


// 显示 使 用 new， 以 构造 函数 的 形式 调用 player () 

// 1. 创建 实例 

// 2. 从 函数 的 原型 中 得 到 方法 usesBat () 

Var swingJay = new Player(); 

if(swingJay && swingJay.usesBat && swingJay.usesBat())t{ 
console.log("SwingJay exists and can use bat"); 


} 


在 上 例 中 ，player () 函数 什么 都 不 做 。 我 们 采用 了 两 种 不 同 的 方法 来 调用 该 函数 ， 一 种 是 
按照 普通 函数 来 调用 ， 另 一 种 是 作为 构造 函数 来 调用 一 一 注意 其 中 使 用 了 new 操 作 符 。 函 数 定义 
好 之 后 ， 我 们 向 其 添加 了 一 个 userBat () 方 法 。 当 player () 以 普通 函数 调用 时 ， 对 象 并 没有 被 
实例 化 ，undefinegd 被 赋 给 了 crazyBob。 但 当 使 用 new 操 作 符 调用 该 函数 的 时 候 ， 就 得 到 了 一 
个 完整 的 实例 化 对 象 swingJay。 


























4.2 实例 属性 与 原型 属性 
实例 属性 是 作为 对 象 实例 自身 一 部 分 的 那些 属性 ， 如 下 例 所 示 : 


function Player() { 

this.isAvailable = function() { 

return "Instance method says - he is hired"; 

je 
} 
Player.prototype.isAvailable = function() { 

return "Prototype method says - he is Not hired"; 
}; 
Var crazyBob = new Player (); 
console.log(crazyBob.isAvailable()); 



































运行 这 个 例子 ， 你 会 看 到 输出 了 字符 串 Instance methogd says - he is hiregd。 在 函 
数 Player () 中 定义 的 函数 isavailable () 作 为 Player 实 例 的 方法 被 调用 。 这 意味 着 除了 将 属 
性 附着 在 原型 上 之 外 ， 也 可 以 使 用 关键 字 this 在 构造 函数 中 初始 化 属性 。 如 果 相 同 的 函数 同时 
被 定义 为 实例 属性 和 原型 属性 ， 则 实例 属性 的 优先 级 更 高 。 控 制 初始 化 优先 级 的 规则 如 下 : 
口 原型 中 的 属性 被 绑 定 到 对 象 实例 中 
口 构造 函数 中 的 属性 被 绑 定 到 对 象 实例 中 

本 例 中 为 我 们 展示 了 关键 字 this 的 用 法 。 这 个 关键 字 的 用 法 很 容易 把 人 搞 糊 涂 ， 因 为 它 在 
JavaScript 中 的 行为 并 不 一 致 。 在 Java 等 其 他 面向 对 象 语 言 中 ， 关 键 字 this 指 向 的 是 类 的 当前 实 
例 。 在 JavaScript 中 ，this 的 值 是 由 函数 的 调用 上 下 文 (invocation context ) 以 及 调用 位 置 所 决定 
的 。 让 我 们 来 看 看 如 何 理解 这 种 行为 。 


口 当 this 用 于 全 局 上 下 文中 : 如 果 是 在 全 局 上 下 文中 使 用 his， 它 就 会 被 绑 定 在 全 局 上 下 
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文 。 比 如 在 浏览 器 中 ， 全 局 上 下 文通 常 是 window。 对 于 函数 来 说 也 是 如 此 。 如 果 是 在 定 
义 在 全 局 上 下 文 的 函数 中 使 用 this， 它 依然 被 绑 定 在 全 局 上 下 文 ， 因 为 该 函数 是 全 局 上 
下 文 的 一 部 分 : 
function globalAlias(){ 

return this; 


} 
console.log(globalAlias()); //[object Window] 








口 当 this 用 于 对 象 方法 中 : 在 这 种 情况 下 , this 被 赋值 或 绑 定 到 包含 对 象 ( enclosing object ) 





上 。 注意 ,如 果 对 象 存在 般 套 的 话 , 包含 对 象 就 是 那个 直接 的 父 对 象 (immediate parent ): 





var f = { 
name: "f", 
func: function () { 


return this; 
} 
}5 


console.log(f.func()); 


YY BELNCS = 

//[object Object] { 

// func: function () { 
VA return this; 

/A 

// name: "f" 

//} 


口 如 果 不 存 在 上 下 文 : 当 一 个 函数 不 跟随 任何 对 象 调用 的 时 候 ， 就 不 会 有 上 下 文 。 默 认 情 


况 下 ， 它 会 被 绑 定 到 全 局 上 下 文 。 如 果 在 这 种 函数 中 使 用 this， 它 也 会 被 绑 定 到 全 局 上 
小 3 





口 当 this 用 于 构造 函数 中 : 我 们 之 前 已 经 看 到 过 ， 当 函数 使 用 关键 字 new 来 调用 时 ， 它 就 


我 们 知道 如 果实 例 和 原型 中 都 定义 了 相同 的 属性 , 会 优先 使 用 实例 属性 。 很 容易 想象 当 创 建 
出 一 个 新 对 象 时 ， 将 构造 函数 原型 "的 属性 复制 过 来 。 不 过 这 种 假设 是 不 对 的 。 实 际 所 发 生 的 是 





会 被 作为 构造 函数 使 用 。 在 构造 函数 中 ，this 指 向 被 构造 的 对 象 。 在 下 面 的 例子 中 ,，£() 
是 构造 函数 〈 因为 是 通过 关键 字 new 调 用 的 )， 因 此 this 指 向 的 就 是 被 创建 出 的 新 对 象 。 
当 我 们 使 用 this .member = "f" 时 ， 新 的 member 属 性 就 被 添加 到 新 创建 的 对 象 中 ， 在 
这 个 例子 中 ， 新 对 象 就 是 o: 


var member = "global"; 
function f() 
{ 

this.member = "f",; 
} 
var o= new f(); 
console.log(o.member); // ff 




























































































DD 























这 里 指 的 是 构造 函数 的 prototype 属 性 ( property )， 而 非 prototype 特 性 ( attribute )。 一 一 译 者 注 
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将 原型 附着 在 对 象 上 , 在 该 对 象 属性 被 引用 的 时 候 去 原型 中 查找 。 基本 上 , 当 引 用 到 对 象 属性 时 ， 
会 发 生 以 下 操作 之 一 。 


吕 检查 对 象 是 否 拥有 该 属性 。 如 果 有 的 话 ， 返 回 该 属性 的 值 。 
口 检查 与 对 象 相关 联 的 原型 。 如 果 在 其 中 找到 了 该 属性 ,将 其 返回 ; 否则 , 返回 unaefinea 
错误 。 


理解 这 一 点 非常 重要 ， 因 为 下 面 的 代码 在 JavaScript 中 运行 起 来 毫 无 问题 : 























function Player() { 
isAvailable=false; 
} 
Var crazyBob = new Player(); 
Player.prototype.isAvailable = function() { 
return isAvailable; 
和 
console.log(crazyBob.isAvailable()); //false 
这 段 代 码 与 之 前 的 例子 略 有 不 同 。 我 们 首先 创建 了 一 个 对 象 , 然后 将 一 个 函数 附加 到 其 原型 。 
当 最 后 在 对 象 上 调用 isAvailable () 方 法 时 ， 如 果 在 该 对 象 (本 例 中 是 crazyBop ) 中 没有 找到 
这 个 方法 ，JavaScript 会 去 对 象 原型 中 搜索 。 这 就 像 是 代码 实时 加 载 (hot code loading ) 一 一 如 果 
运用 得 当 , 这 种 能 力 在 扩展 基本 的 对 象 框架 方面 具有 不 可 思议 的 威力 ,就 算是 在 对 象 创建 之 后 也 
是 如 此 。 


如 果 你 熟悉 OOP ,肯定 想 知 道 是 否 能 够 控制 对 象 成 员 的 可 见 性 及 其 访问 方式 ,我 们 之 前 讲 过 ， 
JavaScript 中 没有 类 。 在 像 Java 这 样 的 编程 语言 中 ， 你 可 以 使 用 诸如 private 和 public 这 种 访问 
修饰 器 (access modifier ) 来 控制 类 成 员 的 可 见 性 。 而 在 JavaScript 中 ， 我 们 可 以 利用 函数 作用 域 
来 实现 类 似 的 效果 。 

口 可 以 在 函数 中 使 用 关键 字 var 来 声明 私有 变量 ， 它 们 可 以 由 私有 函数 或 特权 方法 访问 。 
口 可 以 在 对 象 的 构造 函数 中 声明 私有 函数 ， 并 由 特权 方法 调用 。 

口 特权 方法 可 以 使 用 this.method = function() {} 来 声明 。 

口 公共 方法 可 以 使 用 class .prototype.method = function() {} 来 声明 。 

口 公共 属性 可 以 使 用 this .property 来 声明 ， 能 够 在 对 象 外 部 访问 。 

下 面 的 例子 展示 了 一 些 实现 方法 : 


function Player (name, sport,age,country)t 










































































this.constructor.noOfPlayers++; 


// 私有 属性 和 函数 

// 只 能 由 特权 对 象 浏 览 、 编 辑 或 调用 
Var retirementAge = 40; 

Var available=true; 

Var playerAge = age?age:18; 
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function isAvailable(){ return available && (playerAge<retirementAge); } 
var playerName=name ? name : "Unknown"; 
var playerSport = sport ? sport : "Unknown"; 


// 特权 方法 

// 可 以 从 外 部 调用 ， 也 可 以 由 成 员 访 问 
// 可 以 替换 成 对 应 的 公共 方法 
this.book=function(){ 


if (!isAvailable()){ 
this.available=false; 
} else { 


console.log("Player is unavailable"); 

} 
a 
this.getSport=function(){ return playerSport; }; 
// 公共 属性 ， 可 以 在 任何 地 方 对 其 作出 修改 
this.batPreference="Lefty"; 
this.hasCelebGirlfriend=false; 
this.endorses="Super Brand"; 


} 


// 公共 方法 一 任何 人 都 可 以 读 取 或 写 入 

// 只 能 访问 公共 属性 和 原型 属性 

Player.prototype.switchHands = function(){ this.batPreference="righty"; }; 
Player.prototype.dateCeleb = function(){ this.hasCelebGirlfriend=true; } ; 
Player.prototype.fixEyes = function(){ this.wearGlasses=false; }; 


// 原型 属性 一 任何 人 都 可 以 读 取 或 写 入 (或 覆盖 ) 


Player.prototype.wearsGlasses=true; 


// 静态 属性 一 任何 人 都 可 以 读 取 或 写 入 


Player.noOfPlayers = 0; 





(function PlayerTest () { 
// 创建 Player 对 象 的 新 实例 
var cricketer=new Player ("Vivian","Cricket",23,"England"); 

Var golfer =new Player ("Pete","Golf",32,"USA"); 

console.log("So far there are " + Player.noOfPlayers + " in the guild"); 
// 两 个 溃 数 共享 公共 的 Player .prototype.wearsGlasses 变 量 

cricketer.fixEyes(); 

golfer.fixEyes(); 





cricketer.endorses="Other Brand";// 可 以 更 新 公有 变量 


// 通过 Player 的 原型 来 改变 其 公共 方法 
Player.prototype.fixEyes=function(){ 
this.wearGlasses=true; 

js 

// 只 改变 了 Cricketer 的 函数 

cricketer.switchHands=function()t{ 
this.batPreference="undecided"; 

es 


了 人 


图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 


4.3 ”继承 83 





我 们 需要 理解 这 个 例子 中 的 几 个 重要 概念 。 


口 *etirementaAge 是 一 个 私有 变量 ， 没 有 特权 方法 能 够 获取 或 设置 该 变量 的 值 。 
口 country 变 量 是 作为 构造 函数 参数 而 创建 的 私有 变量 。 构 造 函 数 参数 可 作为 对 象 的 私有 


< - 且 
变量 。 











口 当 调 用 cricketer.switchHands () 时 ， 它 只 能 应 用 于 cricketer， 不 能 用 于 golfer， 

尽管 它 是 Playez 的 原型 国 数 。 

口 私有 函数 和 特权 方法 会 在 创建 出 新 的 对 象 时 实例 化 。 本 例 中 ， 每 个 新 的 Player 实 例 都 有 
自己 的 isavailable() 和 book() 副 本 。 而 公共 方法 只 有 一 份 , 在 所 有 实例 之 间 共 享 ， 这 
样 对 性 能 会 有 一 点 好 处 。 如 果 你 确实 不 需要 什么 私有 内 容 ， 可 以 考虑 为 其 设置 公共 属性 。 























4.3 ”继承 


继承 是 OOP 中 一 个 重要 的 概念 。 经 常会 看 到 一 堆 对 象 都 实现 了 相同 的 方法 。 除 了 少数 几 个 方 
法 之 外 ,几乎 会 看 到 一 模 一 样 的 对 象 定义 ， 这 种 情况 也 很 常见 。 继 承 在 提高 代码 重用 率 方面 效果 
显著 。 下 面 来 看 一 个 继承 关系 的 典型 例子 : 






































可 以 从 一 般 性 的 Animal 类 中 看 到 ， 我 们 基于 一 些 特征 衍生 出 了 如 Mammal 和 Bird 这 种 更 具体 
的 类 。Mammal 和 Bird 类 与 Animal 类 有 着 共同 之 处 ,但 除 此 之 外 ,它们 也 有 自己 独特 的 行为 和 属 
性 。 最终, 我 们 衍生 出 了 更 为 具体 的 哺乳 动物 : Dog 类 。Dog 类 与 Animal 类 和 Mammal 类 有 共同 的 
盟 性 和 行为 ,但 自身 又 有 着 属于 狗 的 属性 和 行为 。 这 个 过 程 可 以 继续 进行 ， 从 而 获得 更 复杂 的 继 
承 关系 。 

传统 上 ， 继 承 用 于 建立 或 描述 一 种 IS-A〈 是 一 个 ) 的 关系 。 例 如 ， 狗 IS-A 哺 乳 动物 。 这 就 是 


所 谓 的 类 继承 ( classical inheritance )。 你 可 以 在 如 C++ 或 Java 这 种 面向 对 象 语言 中 看 到 这 样 的 关系 。 
JavaScript 采 用 了 一 种 完全 不 同 的 机 制 来 处 理 继承 。 作 为 一 种 无 类 的 语言 ，JavaScript 利 用 原型 来 





























如 
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实现 继承 。 和 类 继承 相 比 ， 原 型 继承 在 性 质 上 大 不 相同 ， 需 要 全 面 的 考察 理解 。 这 两 种 继承 方法 
存在 很 大 差异 ， 必 须 仔 细 研 究 。 
在 类 继承 中 ， 实 例 从 类 模板 〈class blueprint ) 中 继承 并 创建 子 类 关系 。 你 无 法 在 类 定义 上 调 
用 实例 方法 ， 只 能 先 创建 出 实例 ， 然 后 在 该 实例 上 调用 方法 。 在 原型 继承 中 ,实例 从 其 他 实例 中 
就 继承 而 言 ，JavaScript 只 使 用 对 象 。 我 们 之 前 讨论 过 ,每 个 对 象 都 有 一 个 链接 ,指向 另 一 个 
叫 作 原型 的 对 象 。 这 个 原型 对 象 也 有 自己 的 原型 ， 以 此 类 推 ， 直 到 出 现 一 个 原型 为 nul1 的 对 象 。 
当然 ，nul1 没 有 原型 ， 它 作为 原型 链 中 的 最 后 一 环 。 


为 了 更 好 地 理解 原型 链 ， 来 看 下 面 的 例子 : 














function Person() {} 

Person.prototype.cry = function() { 
console.log("Crying"); 

} 

function Child() {} 

Child.prototype = {cry: Person.prototype.cry}; 

var aChild = new Child(); 


console.log(aChild instanceof Child); //true 
console.log(aChild instanceof Person); //false 
console.log(aChild instanceof Object); //true 


这 里 ， 我 们 定义 了 Person 和 chilg 一 一 child (孩子 ) IS-A person ( 人 )， 另 外 还 将 Person 
的 cry 属 性 复制 到 了 chila 的 cry 属 性 。 当 我 们 使 用 instanceof 观 察 两 者 之 间 的 关系 时 , 很 快 就 
会 发 现 单 任 复制 行为 无 法 真正 使 得 chil1d 变 成 Pearson 的 实例 ，achilda instanceof Person 结 
果 为 假 。 这 只 不 过 是 复制 ， 或 者 说 是 伪装 〈masquerading )， 并 不 是 继承 。 即 便 是 将 Person 的 所 
有 属性 都 复制 给 chila， 这 也 并 非 继承 。 在 此 展示 这 种 不 良 做 法 仅仅 是 出 于 讲解 的 目的 。 我 们 希 
望 有 一 个 原型 链 一 一 一 种 IS-A 的 关系 ， 一 种 真正 的 继承 ， 可 以 让 我 们 说 child ( 孩子 ) IS-A person 
( 人 )。 我 们 要 创建 一 个 链 : child (孩子 ) IS-Aperson ( 人 ) IS-Amammal ( 哺乳 动物 ) IS-A animal 
(动物 ) IS-A object (对 象 )。 在 JavaScript 中 ， 可 以 通过 将 对 象 的 实例 作为 原型 来 实现 : 















































SubClass.prototype = new SuperClass(); 
Child.prototype = new Person(); 


修改 一 下 先前 的 例子 : 


function Person() {} 

Person.prototype.cry = function() { 
console.log("Crying"); 

} 

function child(). {} 

Child.prototype = new Person(); 

var aChild = new Child(); 

console.log(aChild instanceof Child); //true 

console.log(aChild instanceof Person); //true 
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console.log(aChild instanceof Object); //true 





修改 过 的 那 行 代码 使 用 Person 的 实例 作为 cni1lg 的 原型 。 和 之 前 的 方法 相 比 ， 这 是 一 处 重 
要 的 差异 。 我 们 以 此 说 明 child ( 孩子 ) IS-A person (人 )。 








我 们 讲 过 JavaScript 沿 原型 链 向 上 查找 属性 ， 直 到 遇见 object .prototype。 下 面 我 们 将 详 
细 讨 论 原型 链 的 概念 ， 尝 试 设计 出 下 面 的 座 员 层次 结构 : 


Employee 
ManAacer Individual 
9 Contributor 


这 是 一 个 典型 的 继承 模式 。 经 理 和 雇员 是 IS-A(n) 关 系 ，Manager 包 含 从 Employee 处 继承 得 来 
的 公共 属性 。 前 者 会 有 一 些 直 属 下 级 。Individual Contributor 同 样 基 于 Employee, 但 是 没有 直属 下 
级 。 从 Manager 衍 生出 的 Team Lead 包 含 一 些 Manager 所 不 具备 的 功能 。 我 们 所 做 的 就 是 让 每 一 个 
子 类 从 父 类 中 获得 属性 (Manager 与 Team Lead 是 父子 关系 )。 





























































来 看 看 如 何在 JavaScript 中 创建 这 种 层次 结构 。 先 来 定义 类 型 


Emolovee 类 型 





function Employee() { 
thissaname ey 
this.dept = 'None'; 
this.salary = 0.00; 
} 


这 些 定义 没有 什么 特别 之 处 。Employee 对 象 包含 了 三 个 属性 


FE: name 、salary 和 department。 


接 下 来 定义 Manager。 这 个 定义 展示 了 如 何 指定 继承 链 中 的 下 一 个 对 象 : 











function Manager () { 
Employee.call (this); 
this.reports .= [):; 


} 
Manager.prototype = Object.create(Employee.prototype); 
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在 JavaScript 中 ,可 以 将 一 个 原型 实例 作为 构造 聘 数 的 prototype 属 性 的 值 。 在 定义 构造 函数 之 
后 ， 你 可 以 随时 这 么 做 。 在 本 例 中 ， 有 两 处 做 法 之 前 并 没有 碰 到 过 。 首 先 ， 我 们 调用 了 
Employee.call (this)。 如 果 你 有 Java 背 景 的 话 ， 这 类 似 于 在 构造 函数 中 调用 super () 方 法 。 
cal1l() 方 法 调用 函数 时 使 用 指定 的 对 象 作 为 函数 上 下 文 (在 这 里 ， 这 个 对 象 会 作为 this 的 值 )， 
换 句 话说 ，call () 允许 指定 函数 运行 时 关键 字 this 指 向 哪个 对 象 。 就 像 Java 中 的 super () ， 必 
须 调 用 barentobject .call(this) 来 正确 地 初始 化 所 创建 的 对 象 。 


在 另 一 个 地 方 ,我 们 并 没有 调用 new () , 而 是 使 用 了 object .create()。object.create() 
在 创建 对 象 时 可 以 指定 原型 。 在 执行 new Parent () 时 ,会 调用 对 应 的 构造 函数 。 在 大 多 数 情况 
下 ， 我 们 希望 Chi1g .prototype 是 一 个 能 够 通过 其 原型 链接 到 Parent .prototype 上 的 对 象 。 
如 果 Parent 的 构造 函数 包含 了 其 他 针对 于 Parent 类 的 逻辑 ， 我 们 并 不 想 在 创建 chi1d 对 象 时 执 
行 它们 , 这 会 导致 非常 难以 排查 的 错误 。object .create() 可 以 在 不 用 调用 Parent 构 造 孔 数 的 
情况 下 ， 在 父子 之 间 创 建 和 使 用 new 操 作 符 时 一 样 的 原型 链 。 


要 想 拥 有 一 个 既 没有 副作用 又 准确 无 误 的 继承 机 制 ， 必 须 确保 执行 以 下 操作 。 
口 将 原型 设置 成 父 类 的 实例 来 初始 化 原型 链 ( 继承 ) 这 一 步 只 需要 做 一 次 〈 因为 原型 对 象 


是 共享 的 )。 
口 调用 父 类 的 构造 函数 来 初始 化 对 象 自身 。 在 每 次 实例 化 的 时 候 都 要 这 么 做 ( 每 次 构造 对 
象 的 时 候 可 以 传人 不 同 的 参数 )。 


理解 了 这 两 点 之 后 ， 让 我 们 来 定义 余下 的 对 象 : 


function IndividualContributor() { 
Employee.call (this); 
this.active projects = []; 
} 
IndividualContributor.prototype = Object.create (Employee.prototype); 















































function TeamLead() { 
Manager.call (this); 
this.dept = "Software"; 
this.salary = 100000; 
} 
TeamLead.prototype = Object.create (Manager.prototype); 


function Engineer() { 
TeamLead.call (this); 
this.dept = "JavaScript"; 
this.desktop_id = "8822"™ ; 
this.salary = 80000; 
Engineer.prototype = Object.create(TeamLead.prototype); 


根据 这 样 的 层次 结构 ， 我 们 可 以 实例 化 这 些 对 象 : 
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Var genericEmployee = new Employee(); 
console.log(genericEmployee); 


上 面 的 代码 片段 输出 如 下 : 


[object Object] { 
dept: "None", 
name: "" 
salary: 0 


} 


一 般 的 Employee 所 属 部 门 ( department ) 被 赋值 为 None ( 默认 值 )， 其 余 的 属性 也 被 赋予 同 
样 的 默认 值 。 


接 下 来 要 做 的 是 实例 化 Manager。 可 以 指定 下 列 属性 值 : 














orl 


Var karen = new Manager (); 
karen.name = "Karen"; 
karen.reports = [1,2,3]; 
console.log (karen); 


以 上 代码 输出 如 下 : 


[object Object] { 
dept: "None", 
name: "Karen", 
enOrtoe ,ls 2 S13 
salary: 0 


} 
对 于 TeamLead， 其 reports 属 性 从 基 类 获得 ( 在 本 例 中 是 Manager ): 


Var jason = new TeamLead(); 
jason.name = "Json"; 
console.1log(jason); 


以 上 代码 输出 如 下 : 


[object Object] { 
dept: "Software", 
name: "Json", 
reDOrtSss [J; 
salary: 100000 

} 


JavaScript 处 理 new 操 作 符 时 ， 会 创建 一 个 新 对 象 ， 然 后 将 该 对 象 作为 this 的 值 传 给 构造 函数 
TeamLead ()。 该 构造 函数 会 设置 projects 属 性 的 值 , 并 悄悄 地 将 内 部 属性 _prototype_ 设 置 成 
TeamLead.prototype 的 值 。 prototype_ 属 性 决定 了 用 于 返回 属性 值 的 原型 链 。 这 个 过 程 并 不 
会 在 对 象 jason 中 设置 从 原型 链 继承 得 来 的 属性 值 。 当 需要 读 取 某 个 属性 的 值 时 ，JavaScript 首 先 
会 检查 是 否 能 在 该 对 象 中 找到 这 个 属性 的 值 。 如 果 找 到 ， 就 返回 属性 值 。 如 果 找 不 到 ，JavaScript 
就 会 利用 _prototype_ 属 性 到 原型 链 中 去 查找 。 照 这 样 说 的 话 ， 执 行 下 面 的 语句 会 怎样 呢 ? 
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Employee.prototype.name = "Undefined"; 


这 并 不 会 传播 (propagate ) 到 Employee 的 所 有 实例 中 。 这 是 因为 在 创建 Employee 实 例 的 时 
候 , 实例 已 经 有 了 该 同名 属性 ( name ) 的 本 地 值 。 当 通过 创建 新 的 Employee 对 象 来 设置 TeamLead 
的 原型 的 时 候 , TeamLead.prototype 也 有 了 name 属 性 的 本 地 值 , 因此 ， 在 JavaScript 查 找 jason 
对 象 (TeamLead 的 实例 ) 的 name 属 性 时 , 会 在 TeamLead .prototype 中 找 该 属性 的 本 地 值 , 它 
不 会 到 Employee .prototype 中 做 进一步 搜索 。 


如 果 你 想 在 运行 时 修改 属性 值 , 并 希望 该 对 象 所 有 的 后 代 能 够 继承 这 个 值 , 那 就 别 把 属性 定 
义 到 对 象 的 构造 函数 中 。 要 做 到 这 一 点 ， 需 要 把 属性 添加 到 构造 函数 的 原型 中 *"。 让 我 们 回顾 一 
下 之 前 的 例子 并 稍 作 修改 : 


function Employee() { 
this.dept = 'None'; 
thie salary e000 
} 
Employee.prototype.name = '' 
function Manager() { 
this.reports = []; 
} 
Manager.prototype = new Employee(); 
Var sandy = new Manager (); 
Var karen = new Manager(); 












































Employee.prototype.name = "Junk"; 


console.log(sandy.name); 
console.log(karen.name); 


你 会 发 现 sandy 和 karen 的 name 属 性 都 变 成 了 Junk， 这 是 因为 name 属 性 是 在 构造 函数 之 外 声 
明 的 。 因 此 ， 当 修改 了 Employee 原 型 中 name 属 性 的 值 ， 会 将 其 传播 到 所 有 的 后 代 。 在 本 例 中 ， 
我 们 是 在 创建 sandy 和 karen 对 象 之 后 修改 了 Employee 的 原型 。 如 果 你 是 在 sandy 和 karen 对 象 
创建 之 前 修改 的 原型 ， 值 仍然 会 变 成 Junk。 


所 有 的 JavaScript 原 生 对 象 一 一 Object、Array、String、Number、RegExp 以 及 Function 一 一 都 
具有 可 以 扩展 的 prototype 属 性 ， 这 意味 着 我 们 可 以 扩展 语言 本 身 的 功能 。 例 如 ， 下 面 的 代码 片段 


就 扩展 了 string 对 象 , 为 其 添加 了 一 个 能 够 反 转 字符 串 的 reverse() 方 法 。 在 原生 String 对 象 中 
并 没有 这 个 方法 ， 但 是 通过 处 理 String 对 象 的 原型 ， 就 可 以 添加 上 这 个 方法 : 





































































































String.prototype.reverse = function() { 
return Array.prototype.reverse.apply (this.split('')).join(''); 
}3 
Var str = 'JavaScript'’; 
console.log(str.reverse()); //"tpircSavaJ" 























Q 这 里 指 的 是 构造 函数 的 prototype 属 性 所 指向 的 原型 对 象 ， 并 非 是 构造 函数 的 [[prototype]]。 一 一 译 者 注 
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尽管 这 是 一 项 非常 强大 的 技术 , 但 切记 不 要 滥用 。 可 以 参阅 http: Cs com/extending- 
native-builtins/ 来 了 解 原生 内 建 对 象 扩 展 过 程 中 的 陷阱 以 及 操作 过 程 中 需要 留意 的 事项 。 


4.4 接收 器 与 设 


接收 器 ( getter ) 是 一 种 很 方便 的 方法 ， 可 以 用 来 获取 特定 属性 的 值 ， 和 名 字 一 样 ， 设 置 器 
( setter ) 是 可 以 用 来 设置 属性 值 的 方法 。 你 可 能 经 常 需 要 根据 其 他 一 些 值 来 生成 某 个 值 。 接 收 器 
和 设置 需 通 常会 写成 如 下 形式 的 函数 : 









































Var person = { 
firstname: "Albert", 
lastname: "Einstein", 
setLastName: function(_lastname){ 
this.lastname= _lastname; 
} 
setFirstName: function (_firstname){ 
this.firstname= _firstname; 
} 
getFullName: function (){ 
return this.firstname + ' '+ this.lastname; 
} 
}; 
person.setLastName ('Newton'); 
person.setFirstName('Issac'); 
console.log(person.getFullName()); 




















如 你 所 见 ，setLastName () 、setFirstName () 和 getFullName () 都 是 用 来 接收 ( get ) 和 
设置 (set ) 属性 的 困 数 。Fullname 是 通过 拼接 firstName 和 1lastName 属 性 而 生成 的 属性 。 这 
种 用 法 很 常见 ，ECMAScript 5 如 今 为 接收 器 和 设置 器 提供 了 默认 语法 。 


下 面 的 例子 展示 了 在 ECMAScript 5 中 如 何 使 用 对 象 字面 量 语 法 来 创建 接收 器 和 设置 器 : 


var person = { 
firstname: "Albert", 
Jastname: "Einstein", 
get fullname() { 
return this.firstname +" "+this.lastname; 









































set fullname(_name){ 
Var words = _name.toString().split(' '); 
this.firstname = words{[0]; 
this.lastname = words[1]; 


二 





person.fullname = "Issac Newton"; 
console.log(person.firstname); //"Issac" 
console.log(person.lastname); //"Newton" 
console.log(person.fullname); //"Issac Newton" 
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另 一 种 声明 接收 器 和 设置 需 的 方法 是 使 用 object .defineProperty () : 


Var person = { 
firstname: "Albert", 
lastname: "Einstein", 


Object .defineProperty (person, 'fullname', { 
get: function() { 
return this.firstname + ' ' + this.lastname; 


3 
set: function(name) { 
Var words = name.splitl( 
this.firstname = wordsl[ 
this.lastname = words[1 
} 
用 


We 
0]; 
| 四 


’ 


person.fullname = "Issac Newton"; 
console.log(person.firstname); //"Issac" 
console.log(person.lastname); //"Newton" 
console.log(person.fullname); //'"Issac Newton" 





在 这 种 方法 中 ， 就 算 对 象 已 经 创建 ， 你 也 可 以 调用 object .definePropery ()。 


现在 你 已 经 了 解 了 JavaScript 面 向 对 象 方面 的 特点 ， 接 下 来 要 学 习 一 些 由 Underscore.js 所 提供 








的 非常 有 用 的 工具 方法 。Underscore.js 的 安装 以 及 用 法 在 上 一 章 中 已 经 讲 过 了 。 这 些 方法 可 以 让 


一 些 对 象 的 日 常 操作 变 得 轻而易举 。 





口 keys () : 该 方法 能 够 检索 对 象 可 枚 举 的 自 有 属性 名 称 。 注意 , 它 并 不 会 向 上 遍历 原型 链 : 


Var _ = require('underscore'); 
var testobj = { 

name: 'Albert', 

age : 90, 


profession: 'Physicist' 
ye 
console.log(_.keys (testobj)); 





//[ 'name', 'age', 'profession' ] 
口 allKeys () : 该 方法 能 够 检索 对 象 自 有 的 以 及 继承 的 属性 名 称 。 
Var _ = require('underscore'); 
function Scientist() { 
this.name = 'Albert'; 


} 

Scientist.prototype.married = true; 

aScientist = new Scientist(); 

console.log(_ .keys(aScientist)); //[ 'name' ] 
console.log(_.allKeys(aScientist));//[ 'name', 'married' ] 


口 values () : 该 方法 能 够 检索 对 象 自 有 属性 的 值 。 


Var _ = require('underscore'); 
function Scientist() { 
this.name = 'Albert'; 


} 
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Scientist.prototype.married = true; 
aScientist = new Scientist(); 


console.log(_.values(aScientist)); //[ 'Albert' | 
口 mapobject () : 该 方法 能 够 转换 对 象 中 各 个 属性 的 值 。 
var _ = require('underscore'); 
function Scientist() { 
this.name = 'Albert'; 


this.age = 90; 
} 


aScientist = new Scientist(); 


var lst = _.mapObject (aScientist, function(val,key)t 
if (key==="age")t 
return val + 10; 
} else { 


return val; 
} 
他 
console.log(lst); //{ name: 'Albert', age: 100 } 


口 functions () : 返回 一 个 包含 对 象 中 所 有 方法 名 称 的 有 序列 表 , 也 就 是 对 象 所 有 的 函数 名 。 
口 pick() : 返回 一 个 只 包含 指定 属性 的 对 象 副本 。 


var _ =require('underscore'); 
Var testobj = { 

name: 'Albert', 

age : 90， 


profession: 'Physicist' 











} 
console.log(_.pick(testobj, 'name','age')); //{ name: 'Albert', age: 90} 
console.log(_.pick(testobj, functionl(val,key,object)t{ 

return _.isNumber (val); 


})); //{ age: 90 } 
口 omit () : 功能 和 pick() 相 反 ， 它 返回 一 个 不 包含 指定 属性 的 对 象 副本 。 





4.5 小 结 


利用 面向 对 象 , 我 们 可 以 更 大 程度 地 控制 代码 及 其 结构 , 借 此 提高 JavaScript 应 用 程序 的 条 理 
性 以 及 质量 。 JavaScript 的 面向 对 象 基于 的 是 函数 原型 和 原型 继承 , 这 两 个 概念 为 开发 人 员 提供 了 
异常 丰富 的 灵感 源泉 。 


在 本 章 中 , 我 们 学 习 了 对 象 创建 和 处 理 的 基本 方法 ， 了 解 了 构造 函数 创建 对 象 的 方法 ,还 深 
入 研究 了 原型 链 以 及 基于 原型 链 的 继承 方法 ， 这 些 基础 知识 可 用 于 构建 下 一 章 将 要 讲 到 的 
JavaScript 模 式 。 
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到 目前 为 止 , 我 们 已 经 学 习 了 编写 JavaScript 代 码 所 需 的 基础 知识 。 一 旦 开始 使 用 这 些 基 本 构 
件 来 构造 规模 更 大 的 系统 ,你 很 快 就 会 意识 到 有 些 事情 是 有 标准 做 法 的 ,在 开发 大 型 系统 的 时 候 ， 
你 会 碰 到 一 些 不 断 重复 出 现 的 问题 ， 模式 就 是 为 这 种 已 知 且 明晰 的 问题 提供 标准 化 解决 方案 的 。 
可 以 将 模式 视 为 一 种 最 佳 实践 、 一 种 有 价值 的 抽象 或 是 一 种 解决 常见 问题 的 模板 。 编写 可 维护 的 
代码 并 非 易 事 。 写 出 模块 化 、 正 确 且 可 维护 代码 的 关键 在 于 能 够 理解 那些 重复 出 现 的 主题 , 利用 
通用 的 模板 设计 出 优化 的 解决 方案 。 关 于 设计 模式 最 重要 的 文献 就 是 《设计 模式 : 可 复 用 的 面向 
对 象 软件 基础 》 作 者 是 被 称 为 “四 人 组 ”( GOF ) 的 Erich Gamma、Richard Helm、Ralph Johnson 
和 John Vlissides。 这 本 学 术 著 作 给 出 了 各 种 模式 的 正式 定义 ,解释 了 现今 流行 使 用 的 大 部 分 模式 
的 实现 细节 。 关 键 是 要 理解 为 什么 设计 模式 如 此 重要 。 


口 模式 为 常见 问题 提供 了 行 之 有 效 的 解决 方案 : 模式 提供 了 解决 特定 问题 的 优化 模板 。 坚 
实 深 厚 的 工程 经 验 与 经 过 验证 的 有 效 性 为 这 些 模 式 提供 了 保证 。 

口 模式 旨 在 重用 : 它们 具备 通用 性 ， 适 合 于 各 种 问题 。 

口 模式 定义 了 词汇 : 模式 是 一 种 定义 明确 的 结构 ， 因 而 为 解决 方案 提供 了 通用 的 词汇 。 这 
使 得 大 型 团队 在 沟通 时 能 够 非常 清晰 地 表达 出 各 自 的 意图 。 
















































































5.1 设计 模式 

在 本 章 中 ， 我 们 将 介绍 一 些 对 JavaScript 有 意义 的 设计 模式 。 但 是 ，JavaScript 的 编码 模式 非 
常 特殊 ， 也 是 我 们 最 感 兴趣 的 。 尽 管 我 们 要 花费 大 量 的 时 间 和 精力 来 领会 并 掌握 设计 模式 ,但 理 
解 反 模式 ( anti-pattern ) 以 及 如 何 避 免 设 计 陷 阱 也 很 重要 。 在 通常 的 软件 开发 周期 中 ， 有 几 个 阶 
段 会 引入 不 良 代码 , 这 主要 是 在 代码 接近 发 布 或 代码 被 转交 给 其 他 维护 团队 的 时 候 。 如 果 此 类 不 
良 设计 被 记录 为 反 模 式 , 就 可 以 作为 开发 指南 , 使 开发 人 员 知 道 应 该 避 开 哪些 陷阱 ， 如 何 绕 过 不 
良 的 设计 模式 。 大 多 数 语 言 都 有 一 些 属于 自己 的 反 模 式 。 基 于 所 解决 问题 的 种 类 , GOF 将 设计 模 
式 宽泛 地 划分 为 以 下 儿 类 。 

口 创建 型 设计 模式 : 该 模式 处 理 的 是 用 于 创建 对 象 的 各 种 机 制 。 尽 管 大 多 数 语言 都 提供 了 

基本 的 对 象 创建 方法 ,但 这 种 模式 着 眼 于 优化 的 或 更 可 控 的 对 象 创建 机 制 。 
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口 结构 型 设计 模式 : 该 模式 考虑 的 是 对 象 的 组 成 以 及 对 象 彼此 之 间 的 关系 ， 其 意图 在 于 将 
系统 变化 对 整个 对 象 关 系 所 造成 的 影响 降低 到 最 小 。 
口 行为 型 设计 模式 : 该 模式 关注 的 是 对 象 之 间 的 依赖 关系 以 及 通信 。 


以 下 是 一 个 识别 模式 分 类 的 清单 。 
口 创建 型 模式 


四 工厂 方法 (Factory method ) 
晶 抽象 工厂 (Abstract factory ) 
别 建造 者 ( Builder ) 
四 原型 ( Prototype ) 
晶 单 例 ( Singleton ) 


口 结构 型 模式 


晶 适配器 (Adapter ) 

@ 桥接 ( Bridge ) 

晶 组 合 ( Composite ) 

曙 装饰 器 ( Decorator ) 

田 外 观 ( Facade ) 

@ 享 元 (Flyweight ) 

@ 代理 ( Proxy ) 

口 行为 型 模式 

@ 解释 髓 (Interpreter ) 

量 模板 方法 ( Template method ) 

@ 责任 链 ( Chain of responsibility ) 

a 命令 (Command ) 

@ 迭代 器 ( Iterator ) 

@ 中 介 者 ( Mediator ) 

四 备忘录 ( Memento ) 

日 观察 者 ( Observer ) 

和 状态 ( State ) 

曙 策略 ( Strategy ) 

和 @ 访问 者 ( Visitor ) 

我 们 在 本 章 中 讨论 的 一 些 模式 并 没有 出 现在 这 个 列表 中 ， 因 为 它们 更 多 的 是 针对 JavaScript 

的 模式 , 或 者 是 这 些 经 典 模式 的 变形 。 我们 同样 也 不 会 去 讨论 那些 不 适合 于 JavaScript 或 者 不 常用 
的 模式 。 
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5.2 命名 空间 模式 


在 JavaScript 中 , 过 度 使 用 全 局 作用 域 差 不 多 是 个 禁忌 。 在 构建 大 型 程序 时 ， 有 时 候 很 难 控制 
全 局 作用 域 的 污染 程度 。 命 名 空间 能 够 减少 程序 创建 的 全 局 变量 的 数量 , 有 助 于 避免 命名 冲突 或 
过 多 的 名 称 前 级。 命名 空间 的 思路 是 为 应 用 程序 或 库 创 建 一 个 全 局 对 象 , 将 所 有 的 其 他 对 象 和 疾 
数 全 部 添加 到 该 对 象 中 , 而 不 是 去 污染 全 局 作用 域 。JavaScript 本 身 并 没有 与 命名 空间 直接 相关 的 
语法 ， 不 过 创建 命名 空间 并 不 难 。 让 我 们 来 看 下 面 的 例子 : 

function Car() {} 

function BMW() {} 

Var engines = 1; 

var features = { 

seats: 6, 


airbags:6 


7 
我 们 将 所 有 的 东西 放 在 了 全 局 作用 域 中 。 这 种 做 法 就 是 一 种 反 模 式 ， 绝 对 不 是 什么 好 主意 。 



























































然而 , 我 们 可 以 对 代码 进行 重 构 , 创建 单个 全 局 对 象 ， 然后 将 所 有 的 函数 和 对 象 作为 该 全 局 对 象 
的 一 部 分 : 

// 单一 全 局 对 象 

Var CARFACTORY = CARFACTORY || {}; 

CARFACTORY .Car = function () {}; 

CARFACTORY .BMW = function () {}; 


CARFACTORY .engines = 1; 
CARFACTORY .features = { 

seats: 6, 

airbags:6 
和 
全 局 命名 室 间 对 象 名 习惯 上 全 部 都 是 大 写 。 这 种 模式 为 应 用 程序 增加 了 命名 空间 ,避免 你 的 
代码 和 其 他 代码 及 外 部 库 发 生命 名 冲突 。 很 多 项 目 都 采用 公司 或 项 目 名 称 来 创建 独特 的 命名 空间 
名 称 可 


尽管 这 看 起 来 是 个 不 错 的 方法 ， 既 可 以 限制 全 局 变量 ， 又 能 够 为 代码 添加 命名 空间 , 但 多 少 
有 点 繁琐 ; 你 得 在 每 个 变量 和 函数 前 面 加 上 命名 空间 前 级 。 需要 输入 的 内 容 更 多 , 代码 也 变 得 嗓 
嗪 。 另 外 , 单个 全 局 实例 意味 着 任何 代码 都 能 够 修改 该 全 局 实例 ,进而 影响 到 其 他 功能 一 一 这 会 
造成 让 人 非常 伤 脑筋 的 副作用 。 在 上 面 的 例子 中 ， 有 一 行 代 码 让 人 很 好 奇 : var CARFACTORY = 
CARFACTORY 11 {};。 当 使 用 大 型 代码 基础 库 的 时 候 ， 你 没 法 确定 你 是 第 一 个 创建 该 命名 空间 
(或 是 命名 空间 属性 ) 的 人 ， 有 可 能 这 个 命名 空间 已 经 有 了 。 为 了 确保 仅 在 该 命名 空间 不 存在 的 
前 提 下 才 进 行 创 建 ， 应 该 坚持 通过 短路 操作 符 11 来 保证 安全 性 。 
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5.3 ”模块 模式 
在 构建 大 型 应 用 程序 时 ， 你 很 快 就 会 发 现 保持 基础 代码 的 组 织 化 和 模块 化 会 变 得 越 来 越 难 。 


模块 模式 有 助 于 维持 代码 清晰 的 独立 性 以 及 条 理性 。 

模块 可 以 将 较 大 的 程序 分 隔 成 较 小 的 部 分 , 赋予 其 各 自 的 命名 空间 。 这 一 点 非常 重要 ,因为 
一 旦 将 代码 划分 成 模块 , 这 些 模块 就 能 够 在 其 他 地 方 重新 使 用 。 精心 设计 的 模块 接口 能 够 使 代码 
易于 重用 和 扩展 。 

JavaScript 提 供 了 灵活 的 函数 和 对 象 , 可 以 轻松 地 创建 出 健壮 的 模块 系统 。 函数 作用 域 有 助 于 
创建 模块 内 部 使 用 的 命名 空间 ， 对 象 可 以 用 来 保存 导出 的 值 。 

在 开始 研究 该 模式 之 前 ， 让 我 们 快速 回顾 一 下 之 前 学 过 的 一 些 概念 。 


我 们 详细 讨论 过 对 象 的 字面 形式 ， 它 可 以 按照 如 下 形式 创建 键 值 对 : 














Var basicServerConfig = { 
environment: "production", 
startupParams: { 
cacheTimeout: 30, 
locale: "en_US" 
} 
Tit fuUnetion (yt 
console.log( "Initializing the server" ); 





. 
updateStartup: function( params ) { 
this.startupParams = params; 
console.log( this.startupParams.cacheTimeout ); 
console.log( this.startupParams.locale ); 


} 
je 
basicServerConfig.init(); //"Initializing the server" 
basicServerConfig.updateStartup({cacheTimeout:60, locale:"en UK"}); //60,en_ UK 


在 本 例 中 ， 我 们 创建 一 个 对 象 的 字面 形式 ， 并 定义 了 多 个 键 值 对 用 以 创建 属性 和 函数 。 

在 JavaScript 中 ， 模 块 模式 的 使 用 率 很 高 。 模 块 可 以 帮助 模拟 类 的 概念 。 它 使 得 我 们 能 够 在 对 
象 中 加 入 公共 /私有 方法 和 变量 ,但 最 重要 的 是 ， 模 块 能 够 将 它们 同 全 局 作用 域 隔离 开 。 变 量 和 函 
数 都 被 限制 在 了 模块 作用 域 中 ， 因 而 也 就 自动 避免 了 与 使 用 相同 名 称 的 其 他 脚本 产生 命名 冲突 。 

模块 模式 的 另 一 个 优美 之 处 在 于 只 暴露 了 公共 API， 其 他 所 有 与 内 部 实现 相关 的 细节 都 以 私 
有 状态 保留 在 模块 的 闭 包 中 。 

与 其 他 面向 对 象 语 言 不 同 ，JavaScript 没 有 直接 的 访问 修饰 符 ， 因 此 也 就 没有 什么 隐私 
( privacy ) 的 概念 ， 没 法 拥有 公共 变量 或 私有 变量 。 我 们 之 前 讲 过 ， 在 JavaScript 中 ， 可 以 使 用 函 
数 作用 域 来 强加 这 种 概念 。 模 块 模式 利用 闭 包 将 变量 和 函数 的 访问 限制 在 模块 内 部 ; 如 果 定 义 在 
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对 象 中 的 变量 和 函数 被 返回 ， 那 就 是 公共 的 了 。 

















下 面 将 之 前 的 例子 改写 成 模块 。 我 们 实际 上 使 用 了 IIFE 并 返回 了 模块 接口 , 也 就 是 函数 init 
和 updqateStartup: 
var basicServerConfig = (function () { 
var environment= "production"; 
startupParams= { 
cacheTimeout: 30, 
locale: "en_US" 
> 
return { 
i Unctior, (Fk He 
console.log( "Initializing the server" ); 
}, 
updateStartup: function( params ) { 
this.startupParams = params; 
console.log( this.startupParams.cacheTimeout ); 
console.log( this.startupParams.locale ); 
} 
> 
0) 
basicServerConfig.init(); //"Initializing the server" 
locale:"en_ UK"}); //60,en_UK 


basicServerConfig.updateStartup({cacheTimeout:60 


在 本 例 中 ，basicserverconfig 是 全 局 上 下 文中 的 一 个 模块 。 要 确保 模块 不 会 污染 全 局 上 
下 文 , 关键 在 于 为 模块 创建 命名 空间 。 因 为 模块 的 目的 在 于 重用 ， 必 须 利用 命名 空间 来 避免 名 称 
冲突 。 对 于 basicserverCconfig 模 块 ， 下 面 的 代码 片段 展示 了 如 何 创建 命名 空间 























// 单一 全 局 对 象 
Var SERVER = SERVER| |{}; 
SERVER.basicServerConfig = (function () { 
var environment= "production"; 
startupParams= { 

cacheTimeout: 30, 

locale: "en_US" 
> 
return { 


init: function () { 
console.log( "Initializing the server" ); 


} 
updateStartup: function( params ) { 
= params; 


this.startupParams = 
console.log( this.startupParams.cacheTimeout 


console.log( this.startupParams.locale ); 


} 
3 


}) (); 
SERVER.basicServerConfig.init(); //"Initializing the server" 
SERVER.basicServerConfig.updateStartup({cacheTimeout:60, locale:"en UK"}); 


//60, en_UK 
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在 模块 中 使 用 模块 通常 是 个 不 错 的 主意 ,但 并 不 是 说 模块 非得 使 用 命名 空间 不 可 。 


模块 模式 的 另 一 种 变形 用 法 试图 克服 该 模式 原本 存在 的 一 些 问 题 , 这 种 改进 后 的 模式 也 被 称 
为 暴露 式 模块 模式 (Revealing Module Pattern，RMP )。RMP 最 初 是 由 Christian Heilmann 提 出 的 ， 
他 不 喜欢 在 调用 其 他 函数 的 公共 函数 或 是 访问 公共 变量 的 时 候 非得 使 用 模块 名 。 另 一 个 小 问题 
是 ,在 返回 公共 接口 时 只 能 采用 对 象 的 字面 形式 写法 。 考 虑 下 面 的 例子 : 














Var modulePattern = function(){ 
Var privateOne = 1; 
function privatern()t{ 
console.log('privateFn called'); 
} 
return { 
publicTwo: 2, 
publicFn:function()t{ 
modulePattern.publicFnTwo(); 
} 
publicFnTwo:function(){ 
privaterFn(); 
} 
} 
0 
modulePattern.publicFn(); "privateFn called" 


可 以 看 到 我 们 需要 通过 publicFn () 中 的 modaulePattern 来 调用 publicFnTwo () 。 另 外 ， 
公共 接口 是 通过 对 象 的 字面 形式 返回 的 。RMP 就 是 对 这 种 典型 的 模块 模式 所 做 出 的 改进 。 其 背后 
的 主要 思路 就 是 将 所 有 的 成 员 都 定义 在 私有 作用 域 中 , 使 用 指针 返回 一 个 匿名 对 象 , 该 指针 所 指 
向 的 私有 功能 需要 公开 暴露 。 


来 看 看 怎么 将 上 面 的 例子 改写 成 RMP。 这 个 例子 主要 受到 了 Christian 个 人 博客 的 启发 : 























Var revealingExample = function()t{ 

Var privateOne = 1; 

function privaterFrn()t{ 
console.log('privateFn called'); 

} 

var publicTwo = 2; 

function publicFn(){ 
publicFnTwo(); 

} 

function publicFnTwo()t{ 
privaterFn(); 

} 

function getCurrentState()t{ 
return 2; 

lj 

// 通过 分 配 共 有 指针 来 暴露 私有 变量 

return { 
setup:publicrFn, 
count :publicTwo, 
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increaseCount :publicFnTwo, 
current:getCurrentState!() 
}3 
了 全 学 


console.log(revealingExample.current); // 2 
revealingExample.setup(); // 调用 privateFn 


这 里 的 一 个 重要 区 别 就 是 函数 和 变量 是 在 私有 作用 域 中 定义 的 ， 返 回 的 匿名 对 象 中 带 有 指 
针 ， 指 向 那些 希望 作为 公共 性 质 的 私有 变量 和 函数 。 相 较 于 经 典 模块 模式 ， 这 种 做 法 更 为 清晰 ， 
应 该 优先 采用 。 


但 在 产品 代码 中 ,你 可 能 希望 更 多 地 使 用 标准 化 方法 来 创建 模块 。 目前, 创建 模块 的 方法 主 
要 有 两 种 。 第 一 种 叫 作 CommonJS 模 块 。CommonJS 模 块 通常 更 适合 于 服务 器 端 JavaScript 环 境 ( 如 
Node.js )。CommonJS 模 块 中 包含 了 一 个 require () 图 数 ， 能 够 接受 模块 名 并 返回 模块 接口 。 这 
种 形式 是 由 CommonJS 志 愿 者 小 组 提出 的 ， 该 组 织 的 目标 是 设计 、 提 出 原型 并 标准 化 JavaScript 
API。CommonJS 模 块 由 两 部 分 组 成 。 一 部 分 是 模块 要 暴露 出 的 变量 和 函数 列表 ; 如 果 你 将 变量 
或 函数 赋值 给 module .exports, 就 会 将 其 暴露 给 外 部 。 男 一 部 分 是 require () 函数 , 模块 可 以 
用 它 导 入 其 他 模块 导出 的 内 容 : 

// 添加 依赖 模块 

var crypto = require('crypto'); 


function randomString(length, chars) { 
Var randomBytes = crypto.randomBytes (length); 



























































} 
// 导出 该 模块 ， 使 其 可 供 其 他 模块 使 用 


module.exports=randomString; 
CommonJS 模 块 在 服务 器 端 由 Node.js 支 持 ， 在 浏览 器 端 由 curl,js 文 持 。 


另 一 种 JavaScript 模 块 形 式 叫 作 异 步 模块 定义 (Asynchronous Module Definition，AMD )。 这 
是 一 种 浏览 器 优先 ( browser-first ) 的 模块 ， 能 够 支持 异步 行为 。 AMD 使 用 aefine () 函数 来 定义 
模块 ， 该 函数 接受 一 个 包含 了 模块 名 称 的 数组 和 一 个 回调 函数 。 模 块 载 和 后，define () 就 会 执 
行 这 个 回调 函数 ， 并 将 已 载 人 的 模块 接口 作为 参数 。AMD 的 目的 在 于 以 异步 方式 载 人 模块 及 其 
依赖 关系 。define () 函数 依据 以 下 签名 〈signature ) 来 定义 命名 或 未 命名 模块 : 


























definel( 
module_iqd /* 可 选 */， 
[dependencies] /* 可 选 */， 
definition function /* 用 于 实例 化 模块 或 对 象 的 函数 */ 
) 四 


可 以 添加 一 个 不 具有 依赖 性 的 模块 : 


definel( 
{ 
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add: function(x, y){ 
return x + y; 
} 
}); 





下 面 的 代码 片段 展示 了 一 个 模块 ， 该 模块 依赖 另外 两 个 模块 : 


define( "math", 
// 依赖 于 这 两 个 模块 
["sum", "multiply"], 
// 模块 定义 函数 
// 将 依赖 关系 (foo 和 bar) 映射 为 函数 参数 
function ( sum, multiply ) { 
// 返回 的 值 决定 了 模块 的 导出 
// (也 就 是 我 们 项 望 暴露 的 功能 ) 


// 在 这 里 创建 你 自己 的 模块 
Var’ Ilath St{ 
demo : function () { 
console.log(sum.calculate(1,2)); 
console.log(multiply.calculate(1,2)); 
} 
地 
return math; 


入 


require 模 块 的 用 法 如 下 : 





require(["math","draw"], function ( math,draw ) { 
draw.2DRender (math.pi); 
} 


RequireJS ( http://requirejs.org/docs/whyamd.html ) 是 实现 了 AMD 的 模块 装载 克之 一 。 


ES6 模块 





两 个 独立 的 模块 系统 加 上 不 同 的 模块 装载 右 着 实 有 点 令 人 生 上 车 , ES6 尝 试 解决 这 个 问题 ES6 
提出 了 一 个 模块 规范 ， 试 图 保留 CommonJS 和 ADM 模 块 模式 的 优点 。ES6 模 块 的 语法 类 似 于 
CommonJS ， 另 外 还 支持 异步 装载 以 及 可 配置 的 模块 装载 : 


//json_processor.js 
function processJSON(url) { 


} 
export function getSiteContent (url) { 
return processJSON (url); 
} 
//main.js 
import { getSiteContent } from "json processor.js"; 
content=getSiteContent ("http://goo0ogle.com/"); 
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ES6 的 导出 功能 可 以 让 你 使 用 类 似 于 CommonJS 的 方式 导出 函数 或 变量 。 在 需要 使 用 导入 区 
数 的 代码 中 ， 可 以 用 关键 字 import 来 指定 从 哪里 导入 所 需 的 依赖 。 所 需 的 依赖 导入 后 ， 就 可 以 
作为 程序 的 组 成 部 分 使 用 了 。 随 后 我 们 会 讨论 如 何在 不 支持 ES6 的 环境 中 使 用 ES6。 








5.4 工厂 模式 


工厂 模式 是 男 一 种 流行 的 对 象 创建 模式 , 它 并 不 需要 使 用 构造 函数 。 该 模式 提供 了 一 个 用 于 
创建 对 象 的 接口 。 根 据 传 入 工厂 的 类 型 ， 可 以 创建 出 特定 类 型 的 对 象 。 这 种 模式 常见 的 实现 通常 
是 利用 类 或 类 的 静态 方法 。 这 样 的 类 或 方法 的 目的 如 下 : 


口 在 创建 相似 对 象 时 ， 抽 象 出 重复 出 现 的 操作 
口 允许 工厂 的 用 户 在 无 需 了 解 对象 创 建 的 内 部 细节 的 情况 下 创建 对 象 


让 我 们 用 一 个 常见 的 例子 来 理解 工厂 模式 的 用 法 。 假 设 我 们 有 : 


口 一 个 构造 刺 数 carFactory () 
口 carFactory 中 一 个 叫 作 make () 的 静态 方法 ， 该 方法 知道 如 何 创建 car 类 型 的 对 象 
口 特定 的 car 类 型 ， 例 如 carFactory.SUV、CarFactory .Sedan 等 


我 们 希望 像 下 面 这 样 使 用 carFactory: 


Var golf = CarFactory.make('Compact'); 
Var vento = CarFactory.make('Sedan'); 
Var touareg = CarFactory.make('SUV'); 


这 里 给 出 了 这 种 工厂 的 实现 方法 。 下 面 的 实现 非常 标准 ,我 们 用 编程 的 方式 调用 了 构造 函数 ， 
创建 指定 类 型 的 对 象 


我 们 将 对 象 类 型 映射 为 构造 函数 。 该 模式 的 实现 方法 不 止 一 种 : 


// 工厂 构造 函数 
function CarFactory() {} 
CarFactory.prototype.info = function() { 
console.log("This car has "+this.doors+" doors and a 
"+this.engine capacity+" liter engine"); 












































CarFactory [const] .prototype = new CarFactory();o 





} 
// 静态 工厂 方法 
CarFactory.make = function (type) { 
var constr 0= type; 
var car; 
CarFactory [constr] .prototype = new CarFactory () ; 
// 创建 新 的 实例 
car = new CarFactory[constr] (); 
return car; 


六 


CarFactory.Compact = function () { 
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5.5 


this.doors = 4; 
this.engine_ capacity = 2; 
}; 
CarFactory.Sedan = function () { 
this.doors = 2; 

this.engine capacity = 2; 
CarFactory.SUV = function () { 
ET OOre ed 

this.engine capacity = 6; 





}; 

Var golf = CarFactory.make('Compact'); 

Var vento = CarFactory.make('Sedan'); 

Var touareg = CarFactory.make('SUV'); 

golf.info(); //"This car has 4 doors and a 2 liter engine" 


建议 在 JS Bin 中 实践 这 个 例子 ,通过 编写 代码 来 理解 这 些 概念 。 














mixin 模式 


mixin 模 式 能 够 显著 减少 代码 中 重复 出 现 的 功能 ， 有 助 于 功能 重用 。 我 们 可 以 将 能 够 共享 的 
功能 放 到 mixin 中 ， 以 此 降低 共享 行为 的 重复 数量 。 这 样 你 就 可 以 将 注意 力 放 在 构建 实际 功能 上 ， 
而 不 是 一 再 去 重复 那些 可 以 共享 的 行为 。 来 考虑 下 面 的 例子 。 我 们 想 创建 一 个 定制 的 日 志 记录 器 
( logger )， 任 何 对 象 实例 都 可 以 使 用 。 这 个 日 志 记 录 器 会 在 希望 使 用 /扩展 mixin 的 对 象 之 间 共 享 : 




















Var _ =require('underscore'); 
// 将 共享 的 功能 封装 进 CustomLogger 
var logger = (function () { 
Var CustomLogger = { 
log: function (message) { 
console.log (message); 
} 
} 
return CustomLogger; 
}()); 


// 需要 定制 的 日 志 记 录 器 来 记录 系统 特定 日 志 的 对 象 
Var Server = (function (Logger) { 
var CustomServer = function () { 
this Tnit .= funetion () € 
this.log("Initializing Server.."); 
ys 
上 


// 将 CustomLogger 的 成 员 复 制 /扩展 为 CustomServer 
_.extend (CustomServer.prototype, Logger); 


return CustomServer; 
} (logger)); 


(new Server()).init(); // 初始 化 服务 器 …… 
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在 本 例 中 , 我 们 使 用 了 Underscore.js 中 的 _.extend 上 一 章 中 讲 过 该 函数 。 这 个 函数 用 来 
将 源 对 象 (Logger ) 中 的 所 有 属性 都 复制 到 目标 对 象 (CustomServer .prototype ) 中 。 正 如 
在 本 例 中 所 看 到 的 , 我 们 创建 了 一 个 共享 的 customLogger 对 象 , 供需 要 该 功能 的 对 象 实例 使 用 。 
例如 customserver 对 象 在 它 的 init() 方 法 中 就 调用 了 日 志 记 录 器 的 1og() 方法。 
CustomServer 之 所 以 能 使 用 这 个 方法 ， 是 因为 我 们 利用 Underscore 的 extend() 扩展 了 
CustomLogger。 我 们 动态 地 将 mixin 的 功能 加 入 到 了 对 象 中 。 重 要 的 是 要 理解 mixin 和 继承 之 间 
的 区 别 。 如 果 有 可 以 在 多 个 对 象 和 类 层次 之 间 共 享 的 功能 ， 可 以 使 用 mixin; 如 果 要 共享 的 功能 
是 在 单个 类 层次 中 ,可 以 使 用 继承 。 在 原型 继承 中 ， 如 果 继 承 来 自 原型 ， 那么 对 原型 做 出 的 修改 
会 影响 到 从 原型 中 继承 的 一 切 内 容 。 如 果 不 希 望 出 现 这 种 情况 ， 可 以 使 用 mixin。 


















































5.6 ”装饰 器 模式 


装饰 器 模式 的 主要 思想 是 使 用 一 个 空白 对 象 (plain object ) 展开 设计 ， 该 对 象 有 一 些 基 本 的 
功能 。 随 着 设计 的 深入 , 可 以 使 用 现 有 的 装饰 器 来 增强 该 空白 对 象 , 这 是 一 种 在 面向 对 象 领域 中 
非常 流行 的 模式 , 尤其 是 在 Java 中 。 举 一 个 BasicSserver 的 例子 一 一 这 是 一 个 具有 最 基础 功能 的 
服务 器 。 可 以 对 这 些 基 础 功能 进行 装饰 以 满足 特定 的 需求 。 这 个 服务 器 需要 在 不 同 的 端口 服务 于 
PHP 和 Nodejs。 各 种 不 同 的 功能 都 可 以 装饰 到 基础 服务 器 上 


Var phpServer = new BasicServer(); 

phpServer = phpServer.decorate('reverseProxy'); 
phpServer = phpServer.decorate('servePHP'); 
phpServer = phpServer.decorate('80'); 

phpServer = phpServer.decorate('serveStaticAssets'); 
phpServer.init(); 


Nodejs 服 务 需 需要 执行 以 下 操作 : 


Var nodeServer = new BasicServer(); 

nodeServer = nodeServer.decorate('serveNode'); 
nodeServer = nodeServer.decorate('3000'); 
nodeServer.init(); 


在 JavaScript 中 , 实现 装饰 需 模 式 的 方法 不 止 一 种 。 我 们 将 讨论 一 种 通过 列表 实现 的 方法 , 这 
种 实现 不 依赖 于 继承 或 方法 调用 链 : 


// 实现 最 小 化 的 BasicServer 
function BasicServer() { 
this.pid = 1; 
console.log("Initializing basic Server"); 
this.decorators_list = []; // 空 的 装饰 器 列表 
} 
// 列 出 所 有 的 装饰 器 


BasicServer.decorators = {}; 






































// 将 每 个 装饰 器 添加 到 BasicServer 的 装饰 器 列表 中 
// 列表 中 的 每 个 装饰 器 都 会 被 应 用 到 BasicServer 实 例 
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BasicServer.decorators.reverseProxy = { 
init: function(pid) { 
console.log("Started Reverse Proxy"); 
return pid + 1; 
} 
站 
BasicServer.decorators.servePHP = { 
inits FUNetLion(BDLd)y" { 
console.log("Started serving PHP"); 
return pid + 1; 
} 
De 
BasicServer.decorators.serveNode = { 
init: function(pid) { 
console.log("Started serving Node"); 
return pid + 1; 
} 
上} 
// 每 次 调用 decorate() 时 ， 者 将 装饰 器 推 入 列表 
BasicServer.prototype.decorate = function(decorator) { 
this.decorators_list.push(decorator); 
}3 
// init() 方 法 遍历 所 有 应 用 于 BasicServer 的 装饰 器 ， 
// 在 所 有 的 装饰 器 上 执行 jnit () 方 法 
BasicServer.prototype.init = function () { 


Var running_processes = 0; 
nt | 
for (i = 0; i < this.decorators_list.length; i += 1) { 





decorator name = this.decorators_ list[il]; 

running_processes = BasicServer.decorators[decorator name] .init (pid); 
} 
return running_processes; 


}; 


// 创建 提供 PHP 服 务 的 服务 器 

Var phpServer = new BasicServer(); 
phpServer.decorate('reverseProxy'); 
phpServer.decorate('servePHP'); 
total_processes = phpServer.init(); 
console.log(total_ processes); 


// 创建 提供 Node 服 务 的 服务 器 

Var nodeServer = new BasicServer(); 
nodeServer.decorate('serveNode'); 
nodeServer.init(); 

total_processes = phpServer.init(); 
console.log(total_ processes); 


做 实质 工作 的 是 Basicserver.decorate() 和 BasicServer.init()。 我 们 将 所 有 用 到 的 
装饰 器 都 推 人 Basicservezr 的 装饰 器 列表 中 。 在 int () 中, 我 们 从 这 个 装饰 器 列表 中 执行 或 应 用 
每 个 装饰 器 的 init () 方 法 。 这 种 做 法 不 需要 使 用 继承 ,更 为 简洁 。Stoyan Stefanov 在 《JavaScript 
模式 》 一 书 中 讲述 过 该 方法 ， 由 于 其 简单 性 ， 成 为 了 JavaScript 开 发 人 员 中 的 主流 方法 。 














图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 


104 第 5 章 JavaScript 模式 





5.7 ”观察 者 模式 


我 们 先 来 看 一 下 观察 者 模式 与 语言 无 关 的 定义 。 在 GOF 的 《设计 模式 》 一 书 中 , 是 这 样 定义 
观察 者 模式 的 : 


对 目标 状态 感 兴趣 的 一 个 或 多 个 观察 者 , 通过 将 自身 与 该 目标 关联 在 一 起 
的 形式 进行 注册 。 当 目标 出 现 观察 者 可 能 感 兴趣 的 变化 时 , 发 出 提醒 消息 , 进 
而 调用 每 个 观察 者 的 更 新 方法 。 如 果 观 察 者 对 目标 状态 不 再 感 兴趣 ， 只 需要 解 
除 关联 即 可 。 
在 观察 者 模式 中 ,目标 保 存 了 一 个 对 其 依赖 的 对 象 列表 ( 称 为 观察 者 )， 并 在 自身 状态 发 生 
变化 时 通知 这 些 观察 者 。 目 标 所 采用 的 通知 方式 是 广播 。 观察 者 如 果 不 想 再 被 提醒 ,可 以 把 自己 
从 列表 中 移 除 。 理 解 了 这 些 ， 我 们 可 以 对 该 模式 中 的 参与 者 做 出 如 下 定义 。 


口 目标 (Subject ): 保存 观察 者 列表 ,拥有 可 以 用 来 添加 、 删 除 和 更 新 观察 者 的 方法 。 
口 观察 者 (Observer ): 为 那些 需要 在 目标 状态 发 生变 化 时 得 到 提醒 的 对 象 提供 接口 。 
让 我 们 来 创建 一 个 能 够 添加 、 删 除 和 提醒 观察 者 的 目标 : 

var Subject = ( function( ) { 


function Subject() { 
this.observer_list = []; 





















































} 
// 该 方法 用 于 向 内 部 列表 中 添加 观察 者 
Subject .prototype.add observer = function ( obj ) { 
console.log( 'Added observer' ); 
this.observer_list.push( obj ); 
a 
Subject .prototype.remove_observer = function ( obj ) 
for( var i = 0; i < this.observer_list.length; i++ 
if( this.observer_list[ i ] === obj ) { 
this.observer_list.splice( i, 1 ); 
console.log( 'Removed Observer' ); 
} 
} 
下 
Subject.prototype.notify = function () { 
Var args = Array.prototype.slice.call( arguments, 0 ); 
for( var i = 0; i<this.observer_list.length; i++ ) { 
this.observer list[i] .update(args); 
} 
}; 
return Subject; 


}) 0); 


Subject 的 实现 方法 非常 直观 。notify() 方 法 的 重要 之 处 在 于 调用 所 有 观察 者 对 象 的 
update () 方 法 来 广播 更 新 。 





{ 
p> 
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现在 来 定义 一 个 能 够 创建 随机 推 文 的 简单 对 象 ， 该 对 象 提供 了 一 个 接口 ， 可 以 使 用 
addObserver () 和 removeObserver () 方 法 来 添加 和 删除 观察 者 。 它 也 可 以 使 用 新 获取 的 推 文 
来 调用 supject 的 notify () 方 法 。 如 果 出 现 这 种 情况 ， 所 有 的 观察 者 都 会 将 新 发 布 的 推 文 作为 
参数 ， 发 出 有 推 文 更 新 的 广播 : 

function Tweeter() { 

Var Subject = new Subject (); 


this.addObserver = function ( observer ) { 
subject.add_observer( observer ); 

















J 
this.removeObserver = function (observer) { 
subject .remove_observer (observer); 


}3 


this.fetchTweets = function fetchTweets() { 
// tweet 
var tweet = { 
tweet: "This is one nice observer" 


yy 
// 提示 观察 者 股票 发 生 的 变化 
subject.notify( tweet ); 
已 
} 


添加 两 名 观察 者 : 





var TweetUpdater = { 
update : function() { 
console.log( 'Updated Tweet - ', arguments ); 
l 
}; 
Var TweetFollower = { 
update : function() { 
console.log( '"Following this tweet - ', arguments ); 
} 
je 


两 名 观察 者 都 有 update () 方 法 ， 该 方法 将 由 subject .notify () 方 法 调用 。 现 在 我 们 就 可 
以 通过 Tweeter 的 接口 将 观察 者 添加 到 subject 中 了 : 

















Var tweetApp = new Tweeter(); 
tweetApp.addObserver( TweetUpdater ); 
tweetApp.addObserver( TweetFollower ); 
tweetApp.fetchTweets(); 
tweetApp.removeObserver (TweetUpdater); 
tweetApp.removeObserver (TweetFollower); 


产生 的 输出 信息 如 下 : 


Added observer 
Added observer 
Updated Tweet - { '0': [ { tweet: 'This is one nice observer' } ] } 
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"Following this tweet - { '0': [ { tweet: 


Removed Observer 
Removed Observer 





'This is one nice observer' } ] } 


这 就 是 一 个 用 来 演示 观察 者 模式 概念 的 基本 实现 。 


5.8 JavaScript 的 Model-View-* 模 式 


模型 -视图 -控制 器 ( Model-View-Controller, MVC )、 模型 -视图 -表现 器 ( Model-View-Presenter， 
MVP )、 模 型 -视图 -视图 模型 (Model-View-ViewModel, MVVM ) 流行 于 服务 器 应 用 , 但 是 近年 
来 ，JavaScript 应 用 也 开始 使 用 这 些 模 式 来 构架 和 管理 大 型 项 目 。 涌 现 出 的 很 多 JavaScript 框 架 都 
支持 MV* 模 式 。 我 们 将 使 用 Backbone.js 来 讨论 几 个 例子 。 





























5.8.1 模型 -视图 -控制 器 
MVC 是 一 种 流行 的 结构 型 模式 ， 其 思 



































是 将 应 用 程序 划分 成 三 部 分 ， 从 而 将 信息 的 内 部 描 




















述 与 表现 层 分 离开 。MVC 是 由 多 个 组 件 构 成 的 。 模 型 是 应 用 程序 对 象 ， 视 图 是 底层 模型 对 象 的 




















表现 ， 控 制 需 是 根据 用 户 交 互 处 理 用 户 界 面 的 行为 方式 。 














5.8.2 ”模型 





模型 是 用 来 描述 应 用 程序 数据 的 构件 。 它 们 与 用 户 界面 和 路 由 逻辑 无 关 。 模 型 上 的 变化 通常 
会 按照 观察 者 设计 模式 通知 到 视图 层 。 模 型 中 也 可 以 包含 用 于 验证 、 创 建 或 删除 数据 的 代码 。 在 








数据 发 生 改 变 时 ， 自 动 提 醒 视图 进行 啊 应 的 能 











， 使 得 框架 ( 如 Backbone.js、Amber.js 等 ) 在 构 





建 MV* 应 用 中 发 挥 重 大 作用 。 下 面 的 例子 展示 了 一 个 典型 的 Backbone 模 型 : 





Var EmployeeModel = Backbone.Model.extend({ 


url: '/employee/1', 
defaults: { 
Ys 5 
name: 'John Doe', 
occupation: null 
} 
initialize: 
} 
9 过 


Var JohnDoe = new EmployeeModel () 


function() { 




















模型 结构 在 不 同 的 框架 中 可 能 会 有 差别 ， 但 通常 都 具有 一 些 共 性 。 在 大 多 数 实 际 的 应 用 中 ， 





模型 都 会 被 放 入 内 存 或 数据 库 中 以 持久 化 。 
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5.8.3 视图 


视图 是 模型 的 可 视 化 表现 。 通 常 ， 模 型 的 状态 在 递交 给 视图 层 之 前 需要 处 理 、 过 滤 或 修整 。 
在 JavaScript 中 ， 视 图 负责 渲染 和 操作 DOM 元 素 。 视 图 观察 模型 ， 在 模型 出 现 变 化 时 得 到 提醒 。 
在 用 户 与 视图 交互 时 ， 模 型 的 某 些 属性 可 以 通过 视图 层 修改 (通常 是 通过 控制 器 )。 在 JavaScript 
框架 ( 如 Backbone ) 中 ， 创 建 视图 的 是 模板 引擎 ， 如 Handlebarjs (http:/handlebarsjs.comy/ ) 或 
mustache.js( https://mustache.github.io/ )。 这 些 模板 本 身 并 不 是 视图 ,它们 会 观察 模型 并 根据 模型 
的 变化 更 新 视图 。 来 看 一 个 在 Handlebar 中 定义 的 视图 : 







































































<li class="employee photo"> 
<h2>{{title}}</h2> 
<img class="emp._ headshot_small" src="{{src}}"/> 
<div class="employee details"> 
{{employee details}} 
</div> 
/Ei 


上 例 的 视图 中 包含 了 标签 ,标签 中 含有 模板 变量 , 这 些 变 量 通过 特定 的 语法 来 分 隔 。 例 如 在 
Handlebarjs 中 ， 模 板 变量 使 用 { {} } 来 界定 。 框 架 传送 数据 时 通常 使 用 JSON 格 式 。 框 架 负 责 从 模 
型 中 生成 视图 ， 具 体 的 细节 无 需 用 户 关心 。 





















































5.8.4 ”控制 器 


控制 器 作用 于 模型 和 视图 之 间 , 负责 在 用 户 修改 视图 属性 时 更 新 模型 。 大 多 数 JavaScript 框 架 
并 没有 遵循 控制 器 的 典型 定义 。 比 如 说 ，Backbone 就 没有 控制 器 的 概念 ， 只 有 一 个 叫 作 路 由 器 
( router ) 的 东西 ， 负 责 处 理 路 由 逻辑 。 可 以 把 控制 器 看 作 视 岁 和 路 由 器 的 组 合 ， 因 为 很 多 同步 模 
型 和 视图 的 逻辑 都 是 由 视图 本 身 来 完成 的 。 一 个 典型 的 Backbone 路 由 器 如 下 所 示 : 
































Var EmployeeRouter = Backbone.Router.extendl({ 
routes: { "employee/:id": "route" }, 
route: function( id ) { 
...View render logic... 
} 
} 


5.9 模型 -视图 -表现 器 


模型 -视图 -表现 器 是 之 前 讨论 过 的 原始 MVC 模 式 的 一 种 变形 。MVC 和 MVP 的 目的 都 是 分 
离 , 但 两 者 在 基本 层面 上 有 诸多 不 同 。MVP 中 的 表现 器 是 视图 必 不 可 少 的 逻辑 , 视图 中 的 所 有 调 
用 都 被 委托 给 表现 器 。 表 现 吉 也 会 观察 模型 ， 在 模型 出 现 变 化 时 更 新 视图 。 很 多 作者 采用 视 岁 是 
因为 表现 器 不 仅 将 模型 与 视图 绑 定 在 了 一 起 , 而 且 它 还 能 够 扮演 传统 控制 器 的 角色 。 MVP 有 各 种 
实现 ， 还 没有 框架 能 够 提供 直接 可 用 的 MVP 模 式 。 以 下 是 MVP 与 MVC 在 实现 上 的 主要 差异 : 
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口 视图 不 引用 模型 
口 表现 器 引用 模型 ， 负 责 在 模型 发 生变 化 时 更 新 视图 

MYVP 一 般 有 两 种 实现 方式 。 

口 被 动 视 图 (passive view ): 视图 尽 可 能 简单 ， 所 有 的 业务 逻辑 都 放 在 表现 需 中 。 例 如 ， 一 
个 空白 的 Handlebars 模 板 就 可 以 视 为 被 动 视 图 。 

口 监视 控制 器 〈supervising controller ): 视图 包含 大 部 分 的 声明 式 钦 辑 ( declarative logic )。 
当 视 图 中 简单 的 声明 式 逻 辑 不 够 用 的 时 候 ， 由 表现 器 接管 。 


























下 图 描述 了 MVP 的 架构 : 
用 户 
2 
更 新 被 触发 
操纵 属性 
一 一 一 一 一 一 
表现 器 通过 触发 事件 模型 
一 来 提醒 有 更 新 








5.10 ”模型 -视图 -视图 模型 


MVVM 最 初 是 由 微软 发 明 并 应 用 于 Windows Presentation Foundation ( WPF ) 和 Silverlight。 
作为 MVC 和 MVP 的 一 种 变形 , MVVM 进 一 步 尝 试 将 用 户 界面 (视图 ) 与 业务 模型 及 应 用 程序 行 
为 分 离 。 除 了 我 们 在 MVC 和 MVP 中 讨论 过 的 领域 模型 ( domain model ), MVVM 还 创建 了 一 个 新 
的 模型 层 , 这 个 模型 层 添 加 了 各 种 属性 作为 视图 层 的 接口 。 假 设 我 们 在 用 户 界面 上 有 一 个 复 选 框 ， 
Ischecked 属 性 用 来 保存 复 选 框 的 状态 。 在 MVP 中 ， 视 图 拥有 这 个 属性 ， 表 现 器 能 够 设置 这 个 
属性 。 但 是 在 MVVM 中 ， 拥 有 Ischeckeaq 属 性 的 是 表现 器 ， 视 图 负责 与 其 同步 。 这 时 的 表现 器 
所 做 的 已 经 不 是 典型 表现 需 所 干 的 活 了 ， 它 现在 叫 作 视图 模型 : 
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用 户 交互 





将 调用 传递 给 
同步 事件 


纵 
同步 事件 

















这 些 方法 的 实现 细节 依赖 于 我 们 所 要 解决 的 问题 以 及 所 使 用 的 框架 。 


5.11 小 结 


在 构建 大 型 应 用 程序 时 , 我们 发 现 某 些 问题 模式 反复 地 出 现 , 这 类 问题 都 有 明确 的 应 对 方法 ， 
可 以 拿 来 重用 以 构建 一 套 健壮 的 解决 方案 ,在 本 童 中 ,我 们 讨论 了 一 些 重要 的 模式 及 其 设计 理念 。 
大 多 数 现代 JavaScript 应 用 都 采用 了 这 些 模 式 。 极 少 有 哪个 大 规模 的 系统 构建 没有 实现 模块 、 装 饰 
器 、 工 厂 或 者 MV* 模 式 ， 这 些 都 是 本 章 中 讲 到 的 基本 思想 。 在 下 一 章 中 , 我 们 将 学 习 各 种 测试 及 
调试 技术 。 
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测试 与 调试 

















在 编写 JavaScript 应 用 的 时 候 , 你 很 快 就 会 发 现 一 套 全 面 详实 的 测试 策略 是 必 不 可 少 的 。 事实 
上 , 不 编写 足够 的 测试 几乎 总 是 一 个 坏 主 意 。 测试 必 须 能 够 覆盖 代码 所 有 重要 的 功能 ， 以 确保 以 
下 要 点 : 


口 现 有 代码 的 行为 和 规范 中 的 一 致 
口 新 代码 不 会 违背 规范 所 定义 的 行为 


这 两 点 非常 重要 。 很 多 工程 师 认 为 只 有 第 一 点 才 是 使 用 足够 的 测试 覆盖 代码 的 唯一 原因 。 测 
试 覆 盖 面 的 最 显著 优势 在 于 它 能 够 确保 推送 到 生产 系统 的 代码 几乎 是 没有 错误 的 。 编 写 测 试用 例 
来 巧妙 地 覆盖 最 广 的 代码 功能 区 域 , 通常 能 够 很 好 地 反映 出 代码 的 整体 质量 。 在 这 一 点 上 , 不 应 
该 有 异议 或 是 妥协 。 遗憾 的 是 , 很 多 产品 系统 仍然 没有 足够 的 代码 覆盖 面 。 营造 出 一 种 工程 文化 ， 
使 开发 人 员 认同 编写 测试 与 编写 代码 同等 重要 ， 这 一 点 不 可 小 视 。 


第 二 点 更 重要 。 遗 留 系统 (legacy system ) 通常 很 难 管理 。 在 处 理由 他 人 或 大 型 分 散 式 团 队 
编写 的 代码 时 , 很 容易 引入 错误 ,把 事情 搞 砸 。 就 算是 最 优秀 的 工程 师 也 会 犯错 。 在 使 用 不 熟悉 
的 大 型 代码 基础 库 的 时 候 ， 如 果 不 借助 于 全 面 的 测试 覆盖 , 错误 在 所 难免 。 由 于 对 做 出 的 代码 变 
更 没有 自信 ( 因为 没有 测试 用 例 来 验证 变更 )， 你 发 布 的 代码 自然 根基 不 牢 、 速 度 述 缓 、 存 在 着 
各 种 隐藏 的 错误 。 


你 不 愿意 重 构 或 优化 代码 , 是 因为 不 确定 对 代码 基础 库 做 出 的 改动 会 不 会 捅 竹子 ( 还 是 那 名 
话 , 没 用 测试 用 例 来 验证 你 所 做 出 的 改动 ) 一 一 这 就 形成 了 一 个 恶性 循环 。 如 同一 位 土木 工程 师 
所 言 :“ 虽 然 我 建 起 了 这 座 桥梁 ,但 对 它 的 质量 可 没什么 信心 。 它 可 能 立马 就 会 塌 掉 ， 也 可 能 永 
远 都 不 会 。” 尽 管 听 起 来 可 能 有 些 夸张 ， 但 我 的 确 见 过 不 少 颇具 影响 力 的 产品 代码 没 进行 测试 覆 
盖 就 被 推送 出 来 了 。 这 就 是 在 冒险 , 应 该 避免 。 如 果 编 写 了 足够 的 测试 用 例 去 覆盖 大 部 分 的 功能 
代码 , 那么 在 对 这 些 代 码 做 出 修改 的 时 候 , 你 立刻 就 能 知道 这 次 新 的 改动 有 没有 问题 。 如 果 改 动 
没有 通过 测试 用 例 , 那 就 是 有 问题 了 。 如 果 重 构 和 测试 场景 不 符 ， 你 也 能 知道 是 哪 的 问题 一 一 所 
有 这 些 在 代码 被 推送 成 产品 之 前 就 进行 了 。 


近 些 年 ， 如 测试 驱动 开发 、 自 测试 代码 〈self-testing code ) 这 样 的 理念 日 渐 兴 起 ， 尤 其 是 敏 
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捷 方 法 论 。 这 些 思 想 基 本 上 都 有 其 合理 之 处 , 有 助 于 你 写 出 高 质量 的 代码 一 一 对 其 充满 信心 的 代 
码 。 这 里 所 提 及 的 概念 都 会 在 本 章 中 讲 到 。 你 写 良好 的 测试 用 例 ， 
还 将 学 习 一 些 代码 调试 的 工具 和 方法 。 由 于 缺乏 相应 的 工具 , JavaScript 通 常 不 太 好 进行 测试 及 调 
试 ， 不 过 如 今 的 现代 化 工具 使 得 这 一 过 程 变 得 既 简 单 又 自然 。 





6.1 单元 测试 


当 我 们 说 到 测试 用 例 的 时 候 , 主要 指 的 是 单元 测试 。 认为 测试 单元 只 能 是 函数 的 想法 是 不 对 
的 ,单元 (或 工作 单元 ) 是 一 个 由 单一 行为 组 成 的 逻辑 单元 。 单 元 应 该 能 够 通过 一 个 公共 接口 调 
用 ， 能 够 独立 进行 测试 。 


因此 ， 一 个 单元 测试 具有 下 列 功 能 


口 测试 单个 逻辑 功能 

口 不 依照 指定 的 执行 顺序 运行 

口 负责 自身 的 依赖 关系 以 及 模拟 数据 ( mock data ) 
口 对 于 相同 的 输入 ， 总 是 返回 相同 的 结果 

口 一 目 了 然 ， 可 维护 ， 具 有 和 良好 的 可 读 性 



























































Martin Fowler 提 倡 采用 测试 金字 塔 ( http://martinfowler.com/bliki/TestPyramid. 
CY html ) 策略 ， 以 确保 使 用 大 量 的 单元 测试 来 保证 最 大 程度 的 代码 履 盖 面 。 所 谓 的 
测试 金字 塔 是 说 你 编写 的 低层 单元 测试 数量 应 该 比 高 层 的 集成 和 UI 测 试 多 得 多 。 


本 章 会 讨论 两 种 重要 的 测试 策略 。 


6.1.1 测试 驱动 开发 


测试 驱动 开发 〈test-driven development，TDD ) 近 几 年 来 声名 卓越 。 这 个 概念 最 初 是 作为 极 
限 编程 方法 论 的 一 部 分 提出 的 ， 其 思想 是 采用 短期 迭代 开发 ,在 开发 周期 中 先 写 测试 用 例 。 每 个 
周期 过 程 如 下 。 


(1) 添加 一 个 测试 用 例 作为 特定 代码 单元 的 规范 。 

(2) 运行 现 有 的 测试 用 例 组 ， 检 查 所 编写 的 新 测试 用 例 是 否 没 能 通关 
为 还 没有 单元 代码 )。 这 一 步 确保 了 当前 测试 一 切 正常 。 

(3) 编写 代码 ， 主 要 作为 验证 测试 用 例 之 用 。 这 些 代码 无 需 优 化 、 重 构 ， 其 至 不 用 完全 正确 。 
在 现 阶段 ， 这 种 情况 很 正常 。 

(4) 重新 进行 测试 ， 检 查 所 有 测试 用 例 是 否 通过 。 在 这 一 步 之 后 ， 你 就 能 够 确信 新 代码 没 问 









































点 该 通过 不 了 ( 因 
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(5) 重 构 代 码 ， 确 保 优 化 单元 代码 并 处 理 所 有 的 极端 情况 。 


上 述 步 又 重复 应 用 于 所 添加 的 新 代码 。 这 是 一 种 很 好 的 策略 ,非常 适合 敏捷 方法 。 只 有 在 可 
测试 的 代码 单元 保持 短小 并 且 只 针对 测试 用 例 的 时 候 , TDD 才 可 行 。 编写 短小 、 模 块 化 以 及 精准 
的 代码 单元 ， 并 且 具 备 能 够 用 于 验证 测试 用 例 的 输入 和 输出 ， 这 才 是 关键 所 在 。 





























6.1.2 ”行为 驱动 开发 


在 尝试 实施 TDD 时 ， 一 个 很 常见 的 问题 就 是 用 词 和 正确 性 ( correctness ) 的 定义 。 行为 驱动 
开发 ( behavior-driven development，BDD ) 试图 在 编写 测试 用 例 时 引入 一 种 通用 语言 (ubiquitous 
language )， 这 种 语言 能 够 确保 业务 团队 和 工程 团队 在 表达 上 取得 一 致 。 


我 们 打算 使 用 Jasmine 作 为 主要 的 BDD 框 架 ， 探 究 不 同 的 测试 策略 。 




















KW 你 可 以 从 https://github.com/jasmine/jasmine/releases/download/v2.3.4/jasmine- 
standalone-2.3.4.zip 下 载 独立 的 安装 包 进 行 安装 。 





解压 缩 安装 包 之 后 ， 会 看 到 如 下 目录 结构 : 








v jasmine-standalone-2.3.4 
v lib 
v | jasmine-2.3.4 
boot.js 
console.js 


jasmine_favicon.png 
jasmine-html.js 
jasmine.css 
jasmine.js 
v spec 
PlayerSpec.js 
SpecHelper.js 
了 src 
Player.js 
Song.js 
国 MITLICENSE 


lib 目 录 包 含 了 项 目 中 用 于 编写 Jasmine 测 试用 例 所 需 的 JavaScript 文 件 。 打开 SpecRunner.html， 
会 看 到 包含 了 下 列 JavaScript 文 件 : 
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<script src="lib/jasmine-2.3.4/jasmine.js"></script> 
<script src="lib/jasmine-2.3.4/jasmine-html.js"></script> 


<script src="lib/jasmine-2.3.4/boot.js"></script> 


<!-—- include source files here.. --> 
<script src="src/Player.js"></script> 
<script src="src/Song.js"></script> 

<!-- include spec files here... --> 

<script src="spec/SpecHelper.js"></script> 
<script src="spec/PlayerSpec.js"></script> 


前 三 个 是 Jasmine 自 身 的 框架 文件 ， 余 下 的 包括 待 测试 的 源 文件 以 及 实际 的 测试 规范 。 


接 下 来 用 个 很 普通 的 例子 来 实验 一 下 Jasmine。 创 建 名 为 bigfatjavascriptcode.js 的 文件 ， 将 其 
放 和 人 src/ 目录 。 我 们 将 测试 以 下 函数 ; 











function capitalizeName (name){ 
return name.toUpperCase(); 


} 
这 是 个 很 简单 的 函数 ， 它 只 做 一 件 事 。 它 接收 一 个 字符 串 ， 然 后 返回 该 字符 串 的 大 写 形式 。 
我 们 将 围绕 该 函数 测试 各 种 场景 。 这 就 是 之 前 说 过 的 代码 单元 。 


接 下 来 要 创建 测试 规范 。 新 建 一 个 名 为 testspec.js 的 JavaScript 文 件 ， 将 其 放 人 spec/ 目 录 。 你 
要 把 下 面 两 行 代码 添加 到 SpecRunnerhtml 中 : 





<script src="src/bigfatjavascriptcode.js"></script> 
<script src="spec/test.spec.js"></script> 


包含 文件 出 现 的 先后 次 序 并 不 重要 。 当 运行 SpecRunner.html 时 ， 会 看 到 如 下 内 容 : 











的 Jasmine 2.3.4 


1 spec, 0 failures 


TestStringUtilities 
converts to capital 














这 是 Jasmine 的 报告 ， 显 示 了 所 执行 的 测试 数量 以 及 测试 失败 /成 功 的 次 数 。 现 在 ， 让 我 们 来 
想 办 法 使 测试 用 例 失 败 。 下 面 要 测试 的 是 当 一 个 未 定义 变量 被 传人 函数 时 会 出 现 什么 情况 。 再 添 
加 另 一 个 测试 用 例 : 





it("can handle undefined", function() { 
var str= undefined; 
expect (capitalizeName (str)) .toEqual (undefined); 


}); 
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这 次 运行 SpecRunner .html 时 会 看 到 下 面 的 结果 : 





伏 Jasmine 


ox 
2 specs, 1 failure 


Spec List | Failure 


ST | 

TypeError: name is undefined in file:///Users/8288/Downloads/jasmine-standalone-2.3.4/src/bigfatjavascriptcode.js (line 2) 
如 你 所 见 ， 此 次 测试 用 例 中 所 出 现 的 问题 以 错误 栈 的 形式 详细 地 显示 了 出 来 。 现 在 ,我们 来 

修复 这 些 错 误 。 在 最 初 的 JavaScript 代 码 中 ， 我 们 可 以 这 样 处 理 未 定义 变量 的 问题 : 














function capitalizeName (name){ 
if (name){ 
return name.toUpperCase(); 
} 
} 


修改 过 之 后 ,测试 用 例 就 能 通过 了 ， 你 会 看 到 如 下 的 Jasmine 报 告 : 





的 Jasmine 2.3.4 


2 specs, 0 failures 


TestStringUtilities 
converts to capital 
can handle undefined 











这 与 测试 驱动 开发 很 形似 。 编 写 测 试用 例 , 加 入 必要 的 代码 来 验证 规范 ,然后 重新 运行 测试 
套件 。 下 面 让 我 们 来 弄 清 楚 Jasmine 测 试 的 结构 。 


我 们 的 测试 规范 如 下 : 


descripbe("TestStringUtilities", function() { 
it("converts to capital", function() { 
var. str' = "albert"; 
expect (capitalizeName (str)) .toEqual ("ALBERT"); 
it("can handle undefined", function() { 
var str= undefined; 
expect (capitalizeName (str)) .toEqual (undefined); 
2 
6 


descripbe ("TestStringUtilities" 是 一 组 测试 套件 ,测试 套件 的 名 字 应 该 能 够 描述 所 进 
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行 测试 的 代码 单元 一 一 这 可 以 是 一 个 函数 或 是 一 组 相关 的 功能 。 在 规范 中 ， 调 用 了 Jasmine 的 全 
局 函数 it () ， 你 需要 将 规范 标题 以 及 测试 用 例 所 使 用 的 测试 函数 传 给 它 。 这 个 函数 就 是 实际 的 
测试 用 例 。 你 可 以 用 expect () 函数 捕获 断言 ( assertion ) 或 是 一 般 的 expectation。 如 果 所 有 的 
expectation 均 为 true， 则 规范 通过 。 任 何 有 效 的 JavaScript 代 码 都 能 够 写 到 aescrie() 和 it () 函 
数 中 。 对 需要 作为 expectation 的 一 部 分 进行 验证 的 值 ， 可 以 使 用 匹配 器 (matcher ) 进行 匹配 。 在 
本 例 中 ，toEqual () 是 用 来 对 两 个 值 做 等 量 匹配 的 匹配 器 。Jasmine 包 含 了 大 量 的 匹配 器 ， 能 够 
适用 于 绝 大 部 分 常见 用 例 。Jasmine 支 持 的 一 些 常见 匹配 器 如 下 。 


D toBe () : 检查 所 比较 的 两 个 对 象 是 否 相同 。 其 效果 和 === 一 样 ， 如 以 下 代码 所 示 : 


var a 
var b 















































一 


Value: 1}; 
Value: 1}; 


一 


expect (a) .toEqual (b); // 成 功 ， 等 同 于 
expect (b) .toBe (pb); // 失败 ， 等 同 于 
expect (a) .toBe (a); // 成 功 ， 等 同 于 
口 not ; 使 用 not 前 级 否定 某 个 匹配 器 。 例 如 ，expect (1) .not .toEaual(2) ;会 否定 
toEgqual () 所 做 出 的 匹配 。 
口 tocontain () :检查 某 个 元 素 是 否 存 在 于 数组 中 。 这 并 不 是 toBe () 那样 的 严格 对 象 匹 配 。 
例如 下 面 的 代码 : 
expect ([1, 2, 3]).toContain(3); 
expect ("astronomy is a science") .toContain("science"); 
口 toBeDefined() 和 toBeUndefined(): 可 以 很 方便 地 检查 变量 是 否定 义 过 。 
口 toBeNu1l1 (): 检查 变量 值 是 否 为 nu11。 
口 toBeGreaterThan() 和 toBeLessThan(): 这 两 个 匹配 器 执行 数字 比较 (也 可 以 用 于 字 


/vr 叶 


符 串 )。 















































expect (2) .toBeGreaterThan (1); 
expect (1) .toBeLessThan (2); 
expect ("a") .toBeLessThan ("pb");) 


spy 是 Jasmine 一 个 值得 注意 的 特性 。 在 编写 大 型 系统 时 ， 不 可 能 保证 所 有 的 系统 总 是 可 用 、 
不 出 差错 , 但 同时 又 不 希望 由 于 依赖 性 故障 而 使 单元 测试 无 法 通过 。 为 了 模仿 出 一 个 待 测试 的 代 
码 单元 所 需 的 全 部 依赖 都 可 用 的 情形 ,我 们 模拟 这 些 疑 虑 ,给 出 所 期 望 的 响应 。 模拟 ( mocking ) 
是 测试 很 重要 的 一 方面 ， 大 多 数 测试 框架 都 支持 模拟 。Jasmine 可 以 使 用 spy 特 性 实现 模拟 。 实 际 
上 ， 它 是 对 那些 在 编写 测试 用 例 时 我 们 尚未 准备 好 ， 但 又 担负 着 部 分 功能 的 函数 进行 了 插 桩 
( stub )， 我 们 需要 跟踪 这 些 依赖 ， 不 能 忽略 。 考 虑 下 面 的 例子 : 


























describe("mocking configurator", function() { 
Var configurator = null; 
Var responseJSON rs 
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beforeEach (function() { 
CONnfigursator er; { 
submitPOSTRequest: function(payload) { 
// 这 是 一 个 模拟 服务 ， 最 终 会 被 真实 服务 替代 
console.log (payload); 
return {"status": "200"}; 
} 
}> 
spyOn(configurator, 'submitPOSTRequest') .and.returnVvalue({"status": "200"}); 
configurator.submitPOSTRequest ({ 
"Bort"s"8000", 
"client-encoding": "UTF-8" 
ss 
2 


it("the spy was called", function() { 
expect (configurator.submitPOSTRequest) .toHaveBeenCalled(); 
Fs 


it("the arguments of the spy's call are tracked", function() { 
expect (configurator.submitPOSTRequest) .toHaveBeenCalledWith({"port":"8000", 
"client-encoding": "UTF-8"}); 
9 
人 


我 们 在 编写 测试 用 例 的 时 候 还 没有 所 依赖 的 configurator.submitPOSTRequest ()， 可 
能 是 尚未 实现 ,也 可 能 是 有 人 正在 对 其 进行 修复 。 不管 怎么 说 ,现在 都 用 不 了 。 为 了 能 够 完成 测 
试 ， 我 们 需要 模拟 该 依赖 。Jasmine 的 spy 可 以 用 模拟 来 替换 这 个 函数 ， 并 跟踪 其 执行 。 


在 这 种 情况 下 ， 我 们 需要 确保 调用 了 指定 的 依赖 。 当 依赖 实现 好 之 后 ， 我 们 会 再 回 到 该 测试 用 
例 , 检查 它 是 否 符合 规范 , 但 目前 , 所 需 做 的 就 是 保证 依赖 被 调用 。Jasmine 的 tohaveBeenCalled () 
函数 可 以 跟踪 函数 的 执行 过 程 , 即便 这 个 函数 只 是 模拟 的 。 我 们 可 以 使 用 tonaveBeenCalledwith() 
判断 揪 桩 函数 在 调用 时 是 否 使 用 了 正确 的 参数 。 在 其 他 一 些 有 趣 的 场景 中 也 可 以 使 用 spy。 但 受 
限于 本 章 的 篇 幅 ， 我 们 无 法 为 你 逐一 道 来 ， 但 我 鼓励 你 自己 去 发 现 这 些 领 域 。 












































可 以 参考 Jasmine 的 用 户 手 册 以 获取 关于 Jasmine spy 更 多 的 相关 信息 : 
~> https://jasmine.github.i0/2.0/introduction.html。 


Mocha、Chai 和 Sinon 
尽管 Jasmine 是 名 声 最 大 的 JavaScript 测 试 框架 ，Mocha 和 Chai 在 Node.js 环 境 
> 中 也 逐渐 斩 露 头角 。Mocha 是 一 种 可 用 于 描述 并 运行 测试 用 例 的 测试 框架 。Chai 
Q 是 由 Mocha 支 持 的 断言 库 (assertion library )。Sinon.js 在 创建 测试 模拟 和 插 桩 方面 
得 心 应 手 。 我 们 不 会 在 本 书 中 讨论 这 些 框架 ， 不 过 有 了 Jasmine 的 使 用 经 验 ， 学 
习 这 些 框 架 会 更 容易 。 


图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 


6.2 JavaScript 调试 117 





6.2 ” ”JavaScript 调试 


如 果 你 不 是 一 名 彻头彻尾 的 程序 员 新 手 ， 我 相信 你 肯定 花费 时 间 调 试 过 自己 或 别人 的 代码 。 
调试 几乎 形 同 艺术 。 每 种 语言 都 有 不 同 的 调试 方法 和 难题 。 在 传统 上 ，JavaScript 是 一 门 难以 调试 
的 语言 。 我 曾经 耗费 了 几 天 的 时 间 , 试图 用 alert () 函数 调试 那些 糟糕 的 JavaScript 代 码 。 好 在 像 
Mozilla Firefox 和 Google Chrome 这 样 的 现代 浏览 器 已 经 配备 了 非常 出 色 的 开发 者 工具 ， 帮 助 在 浏 
览 絮 中 调试 JavaScript。 像 IntelliJ 和 WebStorm 这 样 的 IDE, 也 对 JavaScript 及 Node.js 调 试 提 供 了 很 好 
的 支持 。 在 本 章 中 ， 我 们 主要 关注 的 是 Google Chrome 内 置 的 开发 者 工具 。FireFox 支 持 Firebug 扩 
展 , 同时 也 内 置 了 优秀 的 开发 者 工具 , 但 用 法 多 少 和 Google Chrome 的 Developer Tools ( DevTools ) 
类 似 ， 我 们 将 讨论 能 够 用 于 这 两 种 工具 的 通用 调试 方法 。 


在 讨论 特定 的 调试 技术 之 前 ， 让 我 们 先 了 解 一 下 在 调试 代码 时 感 兴趣 的 那些 错误 类 型 。 





















































6.2.1 语法 错误 


如 果 代 码 出 现 不 符合 JavaScript 语 言语 法 的 地 方 , 解释 器 会 拒绝 执行 这 部 分 代码 。 如 果 你 用 的 
IDE 有 语法 检测 功能 的 话 ， 这 些 错 误 很 容易 发 现 。 大 多 数 现代 IDE 都 能 够 处 理 这 种 错误 。 之 前 我 
们 讨论 过 一 些 有 用 的 工具 ( 如 JSLint 和 JSHint ) 都 能 够 捕获 代码 中 的 语法 问题 ， 它 们 能 够 分 析 代 
码 并 标 出 语法 错误 。JSHint 的 输出 一 目 了 然 。 例如， 下 面 的 输出 显示 出 了 代码 中 大 量 需 要 修改 的 
地 方 。 这 段 代 码 取 自我 现 有 的 一 个 项 目 : 











temp git: (dev_branch) X jshint test.js 

test.js: line 1, col 1, Use the function form of "use strict". 

test.js: line 4, col 1, 'destructuring expression' is available in ES6 (use esnext 
option) or Mozilla JS extensions (use moz). 

test.js: line 44, col 70, 'arrow function syntax (=>)' is only available in ES6 (use 
esnext option). 

test.js: line 61, col 33, 'arrow function syntax (=>)' is only available in ES6 (use 
esnext option). 

test.js: line 200, col 29, Expected ')' to match '(' from line 200 and instead saw ':' 
test.js: line 200, col 29, 'function closure expressions' is only available in Mozilla 
JavaScript extensions (use moz option). 

test.js: line 200, col 37, Expected '}' to match '{' from line 36 and instead saw ')'. 
test.js: line 200, col 39, Expected ')' and instead saw '{'. 

test.js: line 200, col 40, Missing semicolon. 








6.2.2 ”使 用 严格 模式 


我 们 之 前 简要 讨论 过 严格 模式 。JavaScript 的 严格 模式 能 够 标 出 或 消除 JavaScript 的 一 些 静 默 
错误 〈silent error )。 严 格 模式 能 够 为 这 些 毛病 抛 出 错误 ， 而 不 是 悄 无 声息 地 运行 失败 。 严 格 模式 
也 有 助 于 将 失误 (mistake ) 变 成 实际 的 错误 (error )。 有 两 种 强制 执行 严格 模式 的 方法 。 如 果 和 希 
望 将 整个 脚本 置信 严格 模式 ， 可 以 在 你 的 JavaScript 程 序 的 第 一 行 写 上 use strict 语 句 。 如 果 希 
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望 将 严格 模式 限制 在 某 个 函数 范围 内 ， 可 以 在 函数 的 第 一 行 写 上 这 人 句 指令: 





function strictFn(){ 


// 该 行使 得 其 下 的 所 有 代码 都 处 于 严格 模式 


'use strict'; 


function nestedSstrictFn() { 


// 该 汲 数 内 的 代码 也 处 于 严格 模式 


} 
} 


6.2.3 ”运行 时 异常 




















当 你 在 执行 代码 并 试图 引用 一 个 未 定义 的 变量 或 是 处 理 null 时 ， 就 会 出 现 错 误 。 如 果 发 生 运 
行 时 异常 ,引发 异常 的 那 行 代码 之 后 的 所 有 代码 都 不 会 再 执行 。 必 须 能 够 正确 地 处 理 这 样 的 异常 











情景 。 蜡 常 处 理 不 仅 能 够 帮助 避免 骨 溃 ， 








而 且 也 有 助 于 调试 。 你 可 以 把 有 可 能 出 现 运 行 时 异常 的 





代码 放 到 try{} 块 中 。 如 果 块 中 的 代码 产生 了 运行 时 异常 ， 对 应 的 处 理 程序 就 能 够 捕获 到 。 处 理 





try { 


程序 定义 在 catch (exception){} 块 中 。 


来 看 下 面 的 例子 : 


var a = doesnotexist; // 抛 出 运行 时 异常 


} catch(e) { 


console.log(e.message); // 处 理 异常 
// 打 印 出 "doesnotexist is not defined" 


} 


在 这 个 例子 中 ， Va de doesnotexist ;打算 将 一 个 未 定义 的 变量 aoesnotexist 赋 给 另 
一 个 变量 a。 这 会 导致 运行 时 异常 。 如 果 我 们 把 这 段 有 问题 的 代码 放 入 try{} catch() {} 块 中 ， 
当 异 常 发 生 或 抛 出 ) 时 ， 执 行 过 程 会 在 try{} 块 处 停止 ， 直接 进入 cat ch () {} 中 的 处 理 程序 。 
catch 处 理 程序 负责 处 理 异 常情 况 。 本 例 中 , 我们 在 控制 台中 显示 用 于 调试 的 错误 信息 。 你 可 以 
明确 地 抛 出 异常 来 触发 代码 中 未 处 理 的 情形 。 考 虑 以 下 代码 ; 








function engageGear (gear)t{ 


if(gear==="R"){ console.log ( 
if(gear==="D"){ console.log ( 
if(gear==="N"){ console.log ( 


throw new Error("Invalid Gear 


try 

{ 
engageGear ("R"); //Reversing 
engageGear ("P" 

} 

catch(e){ 
console.logl(e.message); 


} 














"Reversing");} 
"Driving");} 
"Neutral/Parking");} 


State"); 


); //Invalid Gear State 
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本 例 中 ， 对 有 效 的 换 挡 状 态 (R、N、D ) 做 了 处 理 , 但 如 果 接 收 到 一 个 无 效 状态 ,我 们 会 明 
确 地 抛 出 一 个 异常 ， 清 晰 地 说 明 原 因 。 在 调用 有 可 能 会 抛 出 异常 的 函数 时 , 我 们 会 把 对 应 的 代码 
放 入 try{} 块 中 ,并 使 用 catch() 1} 处 理 程序 与 之 关联 。 如 果 catch () 块 捕获 到 了 异常 ， 我 们 将 
对 异常 情况 做 相应 的 处 理 。 


1. Console.log 与 断言 


在 控制 台中 显示 执行 状态 非常 有 助 于 调试 。 不过, 现代 的 开发 者 工具 允许 你 设置 断 点 , 暂停 
执行 ,然后 检查 运行 期 间 某 个 特定 的 值 。 你 可 以 通过 在 控制 台中 记录 下 变量 的 状态 , 来 快速 地 找 
出 一 些 细小 的 问题 。 





了 解 了 这 些 概念 之 后 ， 让 我 们 来 看 看 如 何 使 用 Chrome 的 Developer Tools 调 试 JavaScript 代 码 。 
2. Chrome DevTools 


可 以 通过 菜单 | More tools | Developer Tools 来 启动 Chrome DevTools: 














Chrome is Out of Date 
New Tab 36T 
New Window BN 
New Incognito Window OBN 
History %Y 
Downloads 个 36J 
Recent Tabs p> 
Bookmarks > 
Zoom 一 |100% | 十 国 中 -> 
Print... 6P 
Save Page As... %S 
Find... $F 

Clear Browsing Data..。 人 器 

Extensions 

Task Manager | Edit Cut ，Copy | Paste 

Encoding > Settings 

Developer Tools Tl About Google Chrome 

View Source SU | Help p 

JavaScript Console TJ 

Inspect Devices 











Chrome DevTools 会 在 浏览 器 底部 开启 一 个 面板 ， 其 中 包含 很 多 非常 有 用 的 区 域 : 





Q 瓦 Ilealements| Network Sources Timeline Proflles Resources Audits Console 二 本 ,x 


Styles Computed Event Listeners » 
v<html class="no-touch js"> i 


> <head>_</head> element, style { ro 
vw<body class="page-——starter-kit" itenscope iteantype="http://schens.org/Article"> } 
.<header class="nain-header">.</header> nedine" SCrecn" ma 
p<div cless="devtools">-</div> body { main 
<footer clLass= nain-footer">-</footer> font-family: Helvetica,Arial,sans-serif; 
<script type="text/javascript" async src="httos://www.aoogle-analytics. con/analytics. 1s"></script> font~size: 16px; 
<seript async Src="LLsttdgoogVefagsanager cor/ate, 1s7id=GTH-HA3LRE"></script> \ine-height: 1.625emi 
wb <script> </script> font-weight: 306; 
<1 一 Google Tag Manager 一 > color: #404040; 
bw <noscript>_</noscript> position: relative; 
p<script> .</script> } 


«I-~ End Google Tag Manager 一 > medin="screen" indes 
一 /hv ev hrsmm eml 二 ae min cre: 

html,no-touch.js A 

Console Search Emulation Rendering 

© YB <top frame> v Preserve log 


> 
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Elements 面 板 可 以 帮助 你 检查 和 监视 DOM 树 以 及 相关 的 样式 表单 。 
Network 面 板 有 助 于 理解 网 络 活动 。 例 如 ， 你 可 以 实时 地 监视 网 络 上 下 载 的 资源 。 


对 于 我 们 而 言 ， 最 重要 的 就 是 Sources 面 板 ，JavaScript 源 代码 以 及 调试 器 会 在 该 面板 中 显示 。 
下 面 来 创建 一 个 HTML 样 例 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>This test</title> 
<script type="text/javascript"> 
function engageGear (gear)f{ 


if(gear==="R"){ console.log ("Reversing");} 
if(gear==="D"){ console.log ("Driving");} 
if(gear==="N"){ console.log ("Neutral/Parking");} 
throw new Error("Invalid Gear State"); 
} 
tr 
人‘ 
engageGear ("R"); //Reversing 
engageGear ("P"); //Invalid Gear State 
} 
catch(e){ 
console.logl(e.message); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


保存 该 HTML 文 件 , 并 在 Google Chrome 中 打开 。 在 浏览 器 中 启动 DevTools, 会 看 到 如 下 画面 : 





QQ Elements Network | Sources| Timeline Profiles Resources Audits Console 





Sources | Content scripts Snippets | [四 | thistest.html x 


vOfile:// <head> 
~ <meta charset="utf-8"> 
YL Users/8288/Documents <title>This test</title> 
thistest.html <script type="text/javascript"> 





3 
4 
5 
6 
7 function engageGear(gear){ 
8 : 
9 
10 


if (gear= ){ console.log ("Reversing");} 
if(gear==: ){ console.log ("Driving");} 
if(gear= ){ console.log ("Neutral/Parking");} 

11 throw new Error("Invalid Gear State"); 

12| } 

13 try 

14| { 

15 engageGear("R"); //Reversing 

16 engageGear("P"); //Invalid Gear State 

El 】 

18| catch(e){ 

19 console,. log(e.message); 

20 


21 ontots: 

{} Line 1, Column 1 
Console | Search Emulation Rendering 
© 可 <topframe> v Preserve log 


Reversing 
Invalid Gear State 
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这 就 是 Sources 面 板 的 视图 。 可 以 在 其 中 看 到 HTML 及 骨 入 的 JavaScript 源 代码 ， 还 可 以 看 到 
Console 和 窗口 。 所 执行 的 文件 及 其 输出 会 显示 在 Console 中 。 


右手 边 就 是 调试 器 窗口 : 





> 并 口 ,x 
四 Inwvd+ 了 + 0 
bp Watch 中 已 
TY Call Stack Async 
Not Paused 
| Scope 
Not Paused 


Y Breakpoints 
No Breakpoints 
pb DOM Breakpoints 


pb XHR Breakpoints 十 
Event Listener Breakpoints 














在 Sources 面 板 中 ， 点 击 第 8 行 和 第 15 行 来 添加 断 点 。 断 点 可 以 在 指定 位 置 停止 脚本 的 执行 : 











4| <meta charset="utf-8"> 

5 <title>This test</title> 

6 <script type="text/javascript"> 
7, function engageGear(gear){ 

8 if(gear==="R"){ console.log ("Reversi 
9 if(gear==="D"){ console.log ("Driving 
10 if(gear==="N"){ console.log ("Neutral 
IE throw new Error("Invalid Gear State") 
12 } 

3 try 
14 

区 晤 engageGear("R"); //Reversing 
16 engageGear("P"); //Invalid Gear Stat 
1 } 








在 调试 面板 中 ， 你 可 以 看 到 所 有 的 断 点 : 





v Breakpoints 
thistest.html:8 
if(gear==="R"){ console.log (. 


thistest.html:15 
engageGear("R"); //Reversing 
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现在 ， 当 你 重新 运行 相同 的 页 面 时 ， 会 发 现 执行 过 程 在 断 点 处 停 下 来 了 。 一 个 非常 有 用 的 
技巧 是 在 调试 阶段 插入 代码 。 在 调试 器 运行 期 间 ， 可 以 通过 添加 代码 来 帮助 你 更 好 地 理解 代码 
的 状态 : 








四 | thistesthtml x 加 Im mwvx+T2 0 
Watch OOC 
<html> | 
了 v Call Stack Async 
<meta charset="utf-8"> (anonymous thistest.html:15 
<title>This test</title> function) 


1 
2 
3 
4 
5 
6 <script type="text/javascript"> 
7 function engageGear(gear){ Paused on a JavaScript breakpoint. 
区 3 if(gear==="R"){ console.log ("Reversing")’; 
9 
19 
11 
12 
13 
14 
16 
17 
18 





if(gear==="D"){ console,log ("Driving"))}| 了 Scope 
if(gear==="N"){ consote.Log ("Neutral/Park » Global Window| 
throw new Error("Invalid Gear State"); 了 Breakpoints 
4 | 加 thistest.html:8 
if(gear==="R"){ consote.1Log (| 
engageGear("R"); //Reversin: | 
engageGear ("Pp"™); //Invalid Gear state |@ thistest.html:15 
engageGear("R"); //Reversing 











catch(e){ 


这 个 窗口 已 经 万 事 错 备 了 。 你 可 以 看 到 执行 过 程 暂停 在 第 15 行 。 在 调试 窗口 中 ,能 够 知道 触 
发 的 是 哪个 断 点 。 另 外 还 可 以 看 到 Call Stack。 恢复 脚本 执行 的 方法 有 好 几 种 。 调 试 命令 窗口 有 一 
系列 操作 : 

















I++ Tv 0 


可 以 通过 点 击 四 按钮 来 恢复 执行 (直至 下 一 个 断 点 )。 当 执行 此 操作 时 ， 脚 本 会 继续 执行 ， 
直到 磁 到 下 一 个 断 点 。 在 这 个 例子 中 ， 会 在 第 8 行 停 住 。 















































1 v Watch xi 

2 <html> 

3,<head> No Watch Expressions 

4| <meta charset="utf-8"> 

东 <title>This test</title> v Call Stack Async 

6 <script type="text/javascript"> E 

7 _ function engageGear(gear){ gear = "R" engageGear thistest.html:8 
| 8】) if(gear==="R"){ console.log ("Reversing"); (anonymous thistest html:1s 

9 if(gear==="D"){ console.log ("Driving");}| 上 

10 if(gear==="N"){ console.log ("Neutrat/Parl function) 

3 throw new Error("Invalid Gear State"); Paused on a JavaScript breakpoint. 

13| try v Scope 

14 { vL 1 

engageGear("R"); //Reversing Oca 

16 engageGear("P"); //Invalid Gear State gear: "R" 

17| } p this: Window 

18| catch(e){ Pp Global Window 

19 console. log(e.message); 3 

20| } v Breakpoints 

21 </script> thistest.html:8 

22| </head> if(gear==="R"){ console.log ( 

23 <body> ' - 

24 </body> thistest.html:15 

25 ,</html> engageGear("R"); //Reversing 











Call Stack 和 窗口 显 示 出 了 是 如 何 执行 到 第 8 行 代码 的 。Scope 面 板 显示 出 了 Local 作 用 域 ， 你 可 
以 在 断 点 被 触发 时 观察 到 该 作用 域 中 的 变量 。 还 可 以 对 下 一 个 函数 选择 步 进 (step into ) 或 是 步 
跳 (step over ) 操作 。 








图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 


6.3 小结 123 





Chrome DevTools 中 还 有 其 他 一 些 非常 有 用 的 机 制 可 以 用 于 代码 的 调试 和 分 析 。 建 议 你 多 用 
DevTools 练 练 手 ， 使 它 成 为 你 日 常 开发 流程 的 一 部 分 。 


6.3 ”小结 


要 想 写 出 稳固 的 JavaScript 人 代码， 测试 和 调试 是 必 不 可 少 的 阶段 。TDD 和 BDD 与 敏捷 方法 论 
密 不 可 分 ,已 经 被 JavaScript 开 发 者 社区 广泛 接受 。 在 本 章 中 ,我 们 了 解 了 TDD 的 最 佳 实践 以 及 
测试 框架 Jasmine 的 用 法 ， 看 到 了 使 用 Chrome DevTools 进 行 JavaScript 代 码 调试 的 各 种 方法 。 在 下 
一 章 中 ， 我 们 将 对 新 奇 的 ES6 世 界 、DOM 操 作 以 及 跨 浏览 器 策略 一 探究 竟 。 
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到 目前 为 止 , 我 们 详细 学 习 了 JavaScript 编 程 语言 。 我 相信 你 对 这 门 语 言 的 核心 已 经 有 了 深刻 
的 领悟 。 到 目前 为 止 ， 我 们 看 到 的 都 是 ECMAScript 5( ES5 ) 中 的 内 容 。ECMAScript 6 (ES6 ) 
或 ECMAScript2015 (ES2015 ) 是 ECMAScript 标 准 的 最 新 版 本 。 这 套 标准 一 直 在 演进 ， 最 近 一 轮 
修改 是 在 2015 年 6 月 完成 的 。ES2015 成 效 显著 ， 其 规范 已 经 在 大 多 数 JavaScript| 擎 中 实现 。 这 可 
是 个 好 消息 。ES6 引 入 了 大 量 的 特性 ， 增 添 了 新 的 语法 和 辅助 工具 (helper )， 大 大 地 丰富 了 这 门 
语言 。 浏 览 器 和 JavaScrip 二 | 警 支持 新 特性 的 速度 ,多 少 有 点 跟 不 上 ECMAScript 标 准 演进 的 步伐 。 
摆 在 眼前 的 一 个 现实 问题 是 ， 绝 大 多 数 程序 员 不 得 不 编写 旧 浏 览 器 能 支持 的 代码 。 臭 名 昭著 的 
Internet Explorer 6 曾经 是 全 世界 使 用 最 广泛 的 浏览 器 ， 要 保证 代码 与 绝 大 部 分 浏览 器 兼容 可 是 
件 恐 怖 的 任务 。 所 以 ， 尽 管 你 想 一 跃 跳 和 人 ES6 那 些 令 人 赞 不 绝口 的 新 特性 中 ,但 是 你 也 得 考虑 一 
个 事实 : ES6 的 一 些 特性 可 能 还 未 被 最 流行 的 浏览 器 或 JavaScript 框 架 所 支持 。 

这 实在 是 让 人 痛苦 ， 不 过 事情 不 是 没有 转机 。Nodejs 采 用 的 最 新 的 V8 引 擎 支持 大 部 分 ES6 
特性 ，Facebook 的 React 对 ES6 的 支持 力度 也 不 差 。 作 为 现今 使 用 率 最 高 的 两 款 浏 览 需 ，Mozila 
Firefox 和 Google Chrome 也 支持 了 大 部 分 ES6 特 性 。 

为 了 避免 此 类 陷阱 以 及 不 可 预测 性 , 已 经 提出 了 一 些 解决 方案 。 其 中 最 有 用 的 就 是 
polyfil/shim 和 转换 编译 器 。 



























































































































































7.1 shim/polyfill 














polyfill ( 也 称 为 shim ) “是 一 种 模式 ， 它 采用 旧 环 境 所 支持 的 兼容 形式 来 定义 新 环境 的 行为 。 
在 GitHub 上 有 一 个 叫 作 ES6 shim 的 地 方 ( https://github.com/paulmillr/es6-shim/ )， 那 里 集合 了 一 大 
批 ES6 shim， 强 烈 建议 你 去 学 习 一 下 。 考 虑 一 个 ES6 shim 的 例子 。 


ECMAScript 2015 ( ES6 ) 标准 中 的 Number .isFinite() 方 法 可 以 判断 传人 的 值 是 否 是 一 个 
有 限 数字 ， 其 等 价 的 shim 如 下 : 


























中 无 论 是 polyfill 还 是 shim, 目前 都 没有 统一 的 译 法 , 故 在 本 书 中 对 这 两 个 词 保 留 了 原文 。( 在 由 人 民 邮 电 出 版 社 出 版 
的 《HTML5 秘 籍 (第 2 版 )》 中 将 polyfill 译 为 “腻子 脚本 ”， 个 人 认为 是 一 个 不 错 的 译 法 。) 一 一 译 者 注 
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Var numberIsFinite = Number.isFinite || function isFinite(value) { 
return typeof value === 'number' && globalIsFinite(value); 
}s 
这 个 shim 首 先 判断 Number .isFinite() 方 法 是 否 可 用 ; 如 果 不 可 用 ， 它 使 用 其 他 的 实现 来 
补 位 。 这 种 技术 真是 太 漂 亮 了 , 它 填补 了 规范 留 下 的 空白 。shim 会 伴随 着 新 特性 不 断 升级 , 因此 ， 
在 项 目 中 使 用 最 新 的 shim 可 谓 是 一 种 明智 的 策略 。 








关于 endsWith() 的 polyfill 的 详细 描述 可 以 在 https://developer.mozilla.org/ 
KW en-US/docs/Web/JavaScript/Reference/Global Objects/String/endsWith 找 到 。String. 
endWith() 是 ES6 的 一 部 分 ， 不 过 很 容易 通过 polyfill 在 ES6 之 前 的 环境 中 使 用 。 


但 shim 并 非 包 治 百 病 ， 它 无 法 应 对 语法 上 的 变化 。 这 时 候 ， 就 可 以 考虑 使 用 转换 编译 器 了 。 





7.2 ”转换 编译 器 





























转换 编译 ( transpiling ) 是 一 种 结合 了 编译 和 转换 的 技术 。 其 思想 是 
然后 使 用 工具 将 其 转换 编译 成 有 效 的 ES5 等 价 代码 。 下面 来 看 一 款 功 能 最 
转换 编译 器 (transpiler ) Bable ( https://babeljs.io/ )。 


Bable 的 用 法 不 止 一 种 。 你 可 以 将 其 安装 成 node 模 块 ， 从 命令 行 调用 ; 也 可 以 作为 脚本 导入 
到 Web 页 面 中 。https://babeljs.io/docs/setup/ 上 详细 地 描述 了 Bable 的 安装 过 程 。Bable 也 有 一 个 不 错 
的 读 取 - 求 值 -输出 -循环 ( Read-Eval-PrintLoop ，REPL ) 环境 ,我 们 将 使 用 Bable 的 REPL 来 演示 
本 章 中 的 大 多 数 例子 。 深 入 理解 Bable 的 各 种 用 法 超出 了 本 书 的 范围 ， 不 过 我 建议 你 现在 就 开始 
将 Bable 作 为 开发 工作 流程 的 一 部 分 。 


我 们 将 在 本 章 中 介绍 ES6 规 范 最 重要 的 部 分 。 你 应 能 去 尝试 ES6 所 有 的 特性 ， 并 将 其 
融入 开发 流程 中 。 























编写 与 ES6 兼 容 的 代码 ， 
完备 , 也 是 最 流行 的 ES6 
































7.3 ”ES6 语法 上 的 变化 


ES6 给 JavaScript 语 法 带 来 了 巨大 的 变化 ， 这 些 变 化 需要 仔细 研究 并 加 以 习惯 。 在 本 节 中 ， 我 
们 将 学 习 一 些 最 重要 的 语法 变化 ， 看 看 如 何 利用 Bable 在 代码 中 立刻 使 用 这 些 新 的 语言 构件 。 




















7.3.1 块 级 作用 域 


之 前 讲 过 ,JavaScript 中 的 变量 都 是 函数 作用 域 .在 迄 套 作用 域 中 创建 的 变量 可 用 于 整个 函数 。 
有 些 编程 语言 提供 了 默认 的 块 级 作用 域 , 任何 在 代码 块 中 ( 通常 由 {} 分 隔 ) 声 明 的 变量 被 限制 ( 可 
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用 于 ) 在 该 块 中 。 为 了 在 JavaScript 中 实现 类 似 的 块 级 作用 域 , 一 个 流行 的 方法 是 利用 立即 调用 浮 
数 表达 式 (immediately-invoked function expression，IIFE )。 考 虑 下 面 的 例子 : 





Va a 

(function blockscope(){ 
Var HS 2 
console.1log(a); // 2 

人 

console.log(a); // 1 


有 了 IFE， 我 们 就 可 以 为 变量 a 创建 一 个 块 级 作用 域 。 对 于 在 IIFE 中 声明 的 变量 ， 其 作用 域 
被 限制 在 函数 内 。 这 是 模拟 块 级 作用 域 的 传统 方法 。ES6 对 块 级 作用 域 提供 了 直接 支持 ,不 需要 
再 用 HFE 了 。 在 ES6 中 ， 你 可 以 在 {} 所 定义 的 语句 块 中 放 入 任何 语句 。 在 声明 具有 块 级 作用 域 的 
变量 时 ,不 再 使 用 var， 而 是 改 用 let。 上 面 的 例子 可 以 使 用 ES6 块 级 作用 域 改写 成 如 下 形式 : 










































































"use strict"; 


Var 
{ 
Feta 2 
console.log( a ); // 2 
} 
console.log( a ); // 1 








单独 使 用 {} 在 JavaScript 中 似乎 并 不 多 见 ， 但 是 这 种 创建 块 级 作用 域 的 习惯 用 法 在 很 多 语言 
中 很 常见 。 块 级 作用 域 也 用 于 其 他 语言 构件 中 ， 如 if{ } 或 for{ }。 


在 以 这 种 方式 使 用 块 级 作用 域 时 ， 一 般 更 倾向 于 将 变量 声明 置 于 语句 块 的 项 部。 使 用 var 声 
明 变 量 和 使 用 let 声 明 变 量 的 一 个 区 别 就 在 于 ， 前 者 是 函数 作用 域 ， 后 者 是 块 级 作用 域 ， 而 且 是 
在 块 中 所 出 现 的 位 置 上 初始 化 。 因 此 对 于 使 用 1et 声 明 的 变量 ， 你 无 法 在 其 声明 之 前 进行 访问 ; 
而 对 于 使 用 var 声 明 的 变量 ,访问 顺序 并 不 重要 : 





























function fooey() { 
console.log(foo); // ReferenceError 
let foo = 5000; 

} 


let 在 循环 中 有 一 种 特定 的 用 法 。 如 果 在 for 循 环 中 使 用 由 var 声 明 的 变量 ， 该 变量 是 在 全 局 
作用 域 或 父 作 用 域 中 创建 的 。 我 们 可 以 通过 1let 在 for 循 环 中 声明 一 一 个 块 级 作用 域 变量 。 考虑 下 面 
的 例子 : 

for (let i = 0; i<5; ji++) { 

console.1log(i); 


} 
console.log(i); // i 没有 定义 


因为 i 是 使 用 1et 创 建 的 , 故 其 作用 域 被 限制 在 for 循 环 中 ,该 变量 在 作用 域 之 外 是 不 可 用 的 。 
ES6 中 块 级 作用 域 还 可 以 用 来 创建 常量 。 使 用 关键 字 const, 可 以 在 块 级 作用 域 中 创建 常量 。 
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一 旦 设置 好 常量 的 值 ， 就 再 也 不 能 更 改 了 : 





if (true) { 

CONnBt del 

console.1o0g(a); 

a=100; // a 是 只 读 的 ， 对 其 赋值 会 引发 TypeError 
} 


常量 在 声明 的 同时 必须 初始 化 。 块 级 作用 域 规则 也 适用 于 函数 。 在 块 中 声明 的 函数 ，5 
块 级 作用 域 范围 内 使 用 。 





/ 
Pe 
CC 
时 








7.3.2 ”默认 参数 


默认 (defaulting ) 是 一 种 很 常见 的 做 法 。 你 总 是 会 给 传人 函数 的 参数 设置 默认 值 或 是 对 变量 
初始 化 。 下 面 的 代码 你 也 许 并 不 陌生 : 








(a,b)t{ 
a=a 
lo 
return 

上 

console.log(sum(9,9)); //18 

console.log(sum(9)); //9 


这 里 ， 如 果 在 调用 函数 时 ， 没 有 为 参数 a 和 wb 提供 对 应 的 值 ， 我 们 使 用 1 1 ( OR 操作 符 ) 将 两 
者 的 默认 值 设置 为 0o。 在 ES6 中 ， 有 一 种 为 函数 参数 设置 默认 值 的 标准 做 法 。 上 面 的 例子 可 以 改 
写成: 


m 
0; 
Qe 
家 


function su 
| 
| 
( 


a+b); 





function sum(a=0, b=0){ 
return (a+b); 

} 

console.log(sum(9,9)); //18 

console.log(sum(9)); {a 


可 以 将 任何 有 效 的 表达 式 或 函数 调用 作为 默认 参数 列表 的 一 部 分 。 





7.3.3 spread 与 rest 


ES6 中 增添 了 一 个 新 操作 符 . . .。 根据 用 法 的 不 同 , 可 以 叫 作 spread 或 rest。 来 看 一 个 小 例子 : 


function print (a, b){ 
console.1log(a,b); 

4 

PETnE (C5 [LE 2 /E22 


如 果 将 .. . 放 在 数组 (或 是 其 他 可 迭代 的 内 容 ) 之 前 ， 该 操作 符 会 将 数组 中 的 元 素 分 散 
( spread ) 到 函数 的 各 个 参数 中 。 参 数 a 和 b 分 别 从 数组 中 得 到 了 两 个 值 。 在 分 散 数组 元 素 时 ， 会 
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忽略 掉 多 余 的 参数 : 

Brnint (s.r [Ls 2 LL 

这 仍然 会 打印 出 1 和 2 ,因为 可 用 的 函数 参数 只 有 两 个 。 这 种 用 法 也 可 以 用 于 其 他 场景 ,例如 
数组 赋值 : 


A 
Var le I 0 wh iar 3 3 
console.log( b ); //[0,1,2,3] 
































操作 符 .. .的 男 一 种 用 法 和 我 们 刚刚 看 到 的 截然 相反 。 这 次 不 再 是 将 值 分 散 ， 而 是 将 值 汇集 
( gather ) 到 一 处 : 
funcotion, print. (a seb)t 
console.1log(a,b); 


} 
ONSoLe. L609 (Drinit tlh; 2 3 D6 7) /LE [2.7356 9 


在 这 个 例子 中 ,变量 pb 接收 了 剩余 的 (rest ) 所 有 值 。 变 量 a 接 收 到 了 第 一 个 值 1， 其 余 的 值 以 
数组 的 形式 传 给 了 变量 b。 








7.3.4 解构 


如 果 你 用 过 像 Erlang 这 样 的 函数 式 语言 ， 对 模式 匹配 的 概念 应 该 不 陌生 。JavaScript 中 的 解构 
(destructuring ) 与 此 非常 类 似 。 解构 允许 你 使 用 模式 匹配 将 值 与 变量 绑 定 在 一 起 。 考虑 下 面 的 例子 : 





var [start, end] = [0,5]; 

for (let i=start; i<end; i++){ 
console.1log(i); 

} 

// 打 印 出 0,1,2,3,4 


利用 数组 解构 给 两 个 变量 赋值 : 





var [start, end] = [0,5]; 


在 上 面 的 例子 中 ,我 们 想 要 的 模式 就 是 第 一 个 值 赋 给 第 一 个 变量 (start )， 第 二 个 值 赋 给 
第 二 个 变量 (ena )。 下面 的 代码 片段 展示 了 数组 解构 的 方法 : ， 




















function fn() { 

ECU [T2731]: 
} 
var [ayb; ol=frr() 3 
console.log(a,b,c); //1 2 3 
// 我 们 可 以 跳 过 其 中 一 个 
站 这 
console.log(d,f); 7A 3 
// 没有 用 到 余下 的 值 
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var [e,] = fn(); 
console.log(e); ZL 


来 看 看 对 象 解构 是 怎么 回 事 。 假 设 有 一 个 能 够 返回 对 象 的 函数 f: 

















function f() { 
return { 





在 解构 函数 返回 的 对 象 时 ， 可 以 使 用 和 先前 类 似 的 语法 ,不 同 之 处 在 于 使 用 的 是 {}， 而 非 []: 


Var -a Hr Br Dv ED .SE 
console.log(a,b,c); //a bc 


和 数组 类 似 , 我 们 使 用 模式 匹配 来 将 函数 返回 的 值 赋 给 对 应 的 变量 。 如 果 使 用 的 变量 名 和 被 
匹配 的 属性 名 一 样 ， 那 么 还 有 一 种 更 简短 的 写法 。 下 面 的 例子 就 是 这 样 的 ， 没 有 任何 问题 : 











Var {bre Fs 


不 过 在 大 部 分 时 间 里 , 使 用 的 变量 名 与 函数 返回 的 属性 名 都 是 不 一 样 的 。 重 要 的 是 要 记得 语 
法 是 source: destination ， 而 不 是 惯常 的 destination: source。 仔 细 观 察 下 面 的 例子 : 















































// target: source - 错误 写法 
人 
console.log(x,y,Z); // X、Y、z 孝 未 定义 
// source: target - 正确 写法 
Yaar” 
Console.log(x,y,z); //abrc 


这 和 给 变量 赋值 所 采用 的 target = source 正 好 相反 ， 因 此 需要 花 点 时 间 来 适应 。 


7.3.5 ”对象 字 面 量 


在 JavaScript 中 ， 对 象 字 面 量 无 处 不 在 。 你 会 觉得 没什么 改进 的 空间 了 ,但 ES6 依 然 想 对 此 作 
出 改进 。ES6 引 入 了 一 些 简写 形式 ， 于 是 便 有 了 男 一 种 更 紧凑 的 对 象 字面 量 语法 : 








var firstname = "Albert", lastname = "Einstein", 
person = { 
firstname: firstname, 
lastname: lastname 


} 
如 果 你 希望 赋值 的 属性 名 和 变量 名 一 样 ， 可 以 使 用 ES6 中 这 种 简洁 的 属性 写法 : 


var firstname = "Albert", lastname = "Einstein", 
person = { 
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firstname, 
lastname 


二 
与 此 类 似 ， 如 果 要 将 函数 分 配给 属性 : 


Var person = { 
getName: function()f{ 
人 7 


} 
getAge: function()f{ 
Ci 
} 
} 


不 用 像 上 面 那 样 ， 只 需要 : 





var person = { 
getName(){ 


我 相信 你 肯定 这 么 干 过 : 


function SuperLogger (level, clazz, msg)t{ 
console.log(level+": Exception happened jin class:"+clazz+" 


} 


- Exception:"+ msg); 
































这 是 一 种 通过 替换 变量 值 来 形成 字符 串 字面 量 的 极为 常见 的 做 法 。ES6 提 供 了 一 种 使 用 反 引 
号 (、) 作为 分 隔 符 的 新 形式 的 字符 串 字 面 量 。 你 可 以 利用 变量 插值 在 模板 字符 串 字 面 量 中 放置 
占 位 符 (placeholder )， 这 些 占 位 符 会 被 解析 及 求 值 。 


刚才 的 例子 可 以 重 写 为 : 

















function SuperLogger (level, clazz, msg)t{ 
console.log(. $s{level} 


} 


Exception happened in class: ${clazz} - Exception: {S$msg}. ); 











我 们 把 字符 串 字 面 量 放 在 了 `` 里 面 。 在 该 字面 量 内 ,所 有 $1{..} 形 式 的 表达 式 会 被 立刻 解析 ， 
这 种 解析 过 程 叫 作 插值 ( interpolation )。 在 解析 的 时 候 ， 变 量 值 将 替换 $t} 中 的 占 位 符 。 由 此 得 
到 的 最 终结 果 是 ， 一 个 用 实际 的 变量 值 将 占 位 符 替 换 掉 之 后 的 普通 字符 串 。 


使 用 字符 串 搬 值 ， 也 可 以 将 一 个 字符 串 拆 分 成 多 行 ， 如 下 所 示 〈 很 像 Python 的 写法 ) : 
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Var quote = 

‘Good night, good night! 
Parting is such sweet sorrow, 
that I shall say good night 
till it be morrow..;} 
console.log( quote ); 


可 以 将 函数 调用 或 有 效 的 JavaScript 表 达 式 作为 字符 串 插 值 的 一 部 分 : 





function sum(a,b)t{ 
console.log( The sum seems to be S${a + b}.); 


} 


sum(1,2); //The sum seems to be 3 


模板 字符 串 的 最 后 一 种 用 法 叫 作 标 记 字 符 串 模板 tagged template string )。 其 思想 是 使 用 函 
数 修改 模板 字符 串 。 考 虑 下 面 的 例子 : 


function emmy (key, ...values)t{ 
console.log (key); 
console.log(values); 
} 
let category="Best Movie"; 
let movie="Adventures in ES6"; 
emmy And the award for S${category} goes to S${movie}，; 




















//["And the award for "," goes to ",""] 
//["Best Movie","Adventures in ES6"] 


最 陌生 的 部 分 就 是 使 用 模板 字面 量 调用 函数 smmy， 这 和 传统 的 函数 调用 语法 不 同 。 我 们 并 
没有 编写 smmy () ， 只 是 使 用 函数 标记 ( tagging ) 了 这 个 字面 量 。 当 函数 被 调用 时 ， 第 一 个 参数 
是 由 所 有 普通 字符 串 组 成 的 数组 ( 数组 元 素 为 插值 表达 式 之 间 的 子 串 )， 第 二 个 参数 是 由 所 有 求 
值 后 的 插值 表达 式 组 成 的 数组 。 


这 就 意味 着 标记 函数 能 够 改变 最 终 的 模板 字符 串 : 





























function priceFilter(s, ...v){ 
// 提高 折扣 
return s[0]+ (v[0] + 5); 


} 
let default_discount = 20; 
let greeting = priceFilter ‘Your purchase has a discount of S${default_ discount)} 


percent; 
console.log(greeting); //Your purchase has a discount of 25 


如 你 所 见 ， 我们 在 标记 函数 中 修改 了 折扣 值 并 将 修改 后 的 结果 返回 。 


7.3.7 Map 与 Set 
ES6 引 入 了 四 个 新 的 数据 结构 : Map 、WeakMap 、Set 和 WeakSet。 我 们 之 前 讨论 过 ， 对 象 是 
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在 JavaScript 中 创建 键 值 对 的 惯常 做 法 , 对 象 的 不 足 之 处 在 于 无 法 使 用 非 字符 串 值 作为 键 。 下 面 的 
代码 片段 演示 了 如 何在 ES6 中 创建 Map: 


let m 
let s 





= new Map(); 

= Be, 0 
m.set('1','Albert');} 
m.set ('MAX', 99);，; 
m.set(s,'Einstein'); 


console.log(m.has('1')); //true 
console.log(m.get (s)); //Einstein 
console.log(m.size); 0 
m.delete(s); 

m.clear (); 


可 以 在 声明 的 同时 初始 化 : 


let m = new Map([ 


[ 1, 'Albert' ]， 
[27 "Douglas® 直 5 
[3 LOINVe 


1); 


如 果 想 迭代 Map 中 的 和 条目， 可 以 使 用 函数 sntries () ， 它 会 返回 一 个 迭代 器 。 你 可 以 使 用 函 
数 key () 途 代 所 有 的 键 ， 使 用 函数 values ( ) 迭代 所 有 的 值 : 








let m2 = new Map([ 


[ 1, 'Albert' ]， 
[ 2 "Douglas], 
[ -3 CLIver 3 
| 
for (let a of m2.entries()){ 


console.l1log(a); 

} 

//[1,"Albert"] [2,"Douglas"] [3,"Clive"] 

for (let a of m2.keys()){ 
console.1log(a); 

站 兴 六 [这 吗 

for (let a of m2.values()){ 
console.l1log(a); 

} 

//Albert Douglas Clive 


JavaScript Map 的 男 一 种 形式 是 WeakMap。 一 个 WeakMap 无 法 阻止 它 的 键 被 垃圾 回收 机 制 处 
理 。WeakMap 的 键 必须 是 对 象 , 值 的 类 型 没有 限制 。 尽 管 行为 表现 和 普通 的 Map 无 异 , 但 你 不 能 
对 其 进行 迭代 ， 也 无 法 清除 它 。 这 些 限制 的 背后 有 一 定 的 原因 。 因 为 Map 的 状态 未 必 一 直 是 静态 
( 键 可 能 会 被 垃圾 回收 机 制 处 理 )， 故 无 法 保证 正确 的 迭代 操作 。 


要 用 到 WeakMap 的 情形 并 不 多 。Map 的 大 部 分 用 法 都 可 以 使 用 普通 的 Map 来 实现 。 
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Map 人 允许 存储 各 种 类 型 的 值 ， 而 Set 是 不 重复 值 的 集合 。Set 的 有 些 方法 和 Map 类 似 ; 但 set () 
方法 变 成 了 adaa() ,也 没有 get () 方 法 。 没 有 get () 方 法 的 原因 在 于 Set 中 的 值 都 是 唯一 的 ， 所 以 
如 果 需 要 的 话 ， 只 检查 Set 是 否 包含 某 个 值 就 行 了 。 考 虑 下 面 的 例子 : 









































let Xa" (uit ALTbert?y} 
let s = new Set([1,2,'Sunday',x]); 
//console.log(s.has (x)); //true 
s.add(300); 
//console.1og(s); //[1,2,"Sunday",{"first":"Albert"},300] 
for (let a of s.entries())t{ 
console.1log(a); 





Pi i) 
// [2,2] 
//["Sunday","Sunday"] 

ZEEEet "AlTDertE"}, (fiESt ALDeEEN}] 
//[300,300] 

for (let a of s.keys()){ 

console.10g(a); 





} 

Xi 

2 

//Sunday 

//{"first":"Albert"} 

//300 

for (let a of s.values()){ 
console.1og(a); 

} 

//1 

ZA2 

//Sunday 

//{"first":;"Albert"} 

//300 


迭代 器 keys () 和 values () 都 能 够 返回 Set 中 不 重复 值 的 列表 。entries () 返 回 一 个 条 目 数 
组 列表 ， 数 组 中 的 项 都 是 不 重复 的 值 。set () 默认 的 迭代 器 是 values ()。 于 二 
7 











7.3.8 Symbol 


ES6 引 和 人 了 一 种 新 的 数据 类 型 Symbol, 它 是 唯一 旦 不 可 变 的 值 。Symbol 通 常用 作对 象 属性 的 
标识 符 ， 可 以 将 其 看 作 唯 一 的 ID。 你 可 以 使 用 工厂 方法 Symbo1l () 创建 Symbol。 但 是 要 记 住 ， 
Symbol () 并 不 是 构造 函数 ， 不 需要 使 用 new 操 作 符 : 


let s = Symbol (); 
console.log(typeof s); //symbol 


与 字符 串 不 同 ，Symbol 可 以 确保 唯一 性 ， 因 此 有 助 于 避免 名 称 冲 突 。 利 用 Symbol， 我 们 就 
有 了 一 个 可 扩展 的 机 制 。ES6 包 含 很 多 内 建 的 Symbol 值 ， 这些 值 能 够 向 用 户 暴 露出 JavaScript 对 象 
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的 各 种 元 行为 ( meta behavior )。 


7.3.9 和 迭代 器 


迭代 需 在 其 他 编程 语言 中 已 经 存在 一 段 时 间 了 ， 它 们 为 处 理 数据 集合 提供 了 非常 方便 的 方 
法 。ES6 也 是 出 于 同样 的 目的 引入 了 迭代 器 。ES6 的 欠 代 器 是 具有 特定 接口 的 对 象 。 和 迭代 器 的 
next () 方 法 可 以 返回 一 个 对 象 。 该 对 象 有 两 个 属性 : value( 下 一 个 值 ) 和 done ( 指示 是 否 已 经 
抵达 最 后 一 个 结果 )。ES6 还 定义 了 一 个 Iterable 接 口 ， 该 接口 描述 了 能 够 产生 迭代 器 的 对 象 。 
来 看 一 个 可 迭代 的 数组 ， 它 所 产生 的 迭代 器 可 以 用 来 处 理 数 组 元 素 : 




















二 

var i = a[lSymbol.iterator] (); 

console.log(i.next ()); // { value: 1, done: false } 
console.log(i.next ()); // { value: 2, done: false } 
console.log(i.next ()); // { value: undefined, done: true } 


如 你 所 见 , 我 们 通过 symbol .iterator () 来 访问 数组 的 迭代 器 , 并 调用 其 next () 方 法 来 获 
取 每 一 个 后 续 元 素 。 该 方法 会 返回 value 和 done。 当 你 在 数组 最 后 一 个 元 素 之 外 调用 next () 方 
法 时 ， 会 得 到 一 个 undefined 值 以 及 done : true， 表 明 整 个 数组 已 经 迭代 完毕 。 





7.3.10 for. .of 循环 
ES6 加 入 了 一 个 新 的 迭代 机 制 ， for. .of 循环 ， 它 可 以 遍历 由 迭代 器 生成 的 一 组 值 。 
使 用 for. .of 所 遍历 的 值 是 可 迭代 的 。 
来 比较 一 下 for. .of 和 for. .in: 























var list = ['Sunday', 'Monday', 'Tuesday']; 
for: ‘(let i dn .List}{ 
console.1log(i); VA nl 


} 
for” (Let TT “Of. TiSt} 

console.1log(i); //Sunday Monday Tuesday 
} 


可 以 看 到 ， 使 用 for . . in 循环 的 话 ， 可 以 遍历 数组 1ist 的 索引 ， 而 for . .of 循环 可 以 遍历 
数组 1ist 的 值 。 








7.3.11 第 头 函数 





ECMAScript 6 新 增 特性 中 最 值得 注意 的 一 个 部 分 就 是 箭头 函数 (arrow function )。 正 如 其 名 ， 
箭头 函数 使 用 箭头 〈 => ) 作为 函数 定义 语法 的 组 成 部 分 。 先 来 看 看 箭头 函数 的 样子 : 
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// 传统 函数 
function multiply(a,b) { 
return a*b; 
} 
// 箭头 总 数 
Var multiply = (a,b) => a*b; 
console.log(multiply(1,2)); //2 


箭头 函数 的 定义 由 参数 列表 [ 零 个 或 多 个 参数 ， 如 果 不 止 一 个 参数 ， 要 在 参数 外 加 上 .. ) 下 
=> 符 号 以 及 随后 的 函数 体 所 组 成 。 


如 果 函 数 体 中 不 止 一 个 表达 式 ， 需 要 在 函数 体外 加 上 { .. }。 如 果 只 有 一 个 表达 式 的话 ， 
可 以 忽略 周围 的 { .. }， 在 表达 式 之 前 会 有 一 个 隐 仿 的 换行 。 币 头 函数 由 多 种 不 同 的 写法 ， 下 
面 是 最 常用 的 几 种 : 


// 单个 参数 ， 单 条 语 向 

// arg => expression; 

Var £1 sw SCONSOle. 10g ("JUust XX") 
£1(); //Just X 




















// 多 个 参数 ， 单 条 语 向 


// (argl [, arg2]) => expression; 
ar EE2 SN(Ry) 
console.log(f2(2,2)); //4 


// 单个 参数 ， 多 条 语 向 
// arg => { 


4 statements; 

// } 

a 
(eS) 


console.1log (x); 
} 
else { 
console.1log (x+5); 





// 多 个 参数 ， 多 条 语 身 


// (larg] [, arg]) => { 
// statements 

/让 

var f4 = (x,y) => { 


if (x!=0 && y!=0){ 
return x*y; 
} 
} 
console.log(f4(2,2));//4 


// 没有 参数 ， 单条 语句 


//() => expression; 
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Yar E57: () 2 

console.log(f5()); //4 

//IIFE 

console.log(( x=>x*3)(3 )); //9 











重要 的 是 要 记 住 普通 函数 参数 的 所 有 特点 都 可 以 用 于 箭头 函数 , 这 包括 默认 值 、 解 构 以 及 rest 

箭头 函数 提供 了 一 种 简洁 的 语法 , 让 你 的 代码 很 有 函数 式 编程 的 范 儿 。 它 之 所 以 受 欢 迎 的 原 
因 在 于 从 代码 中 握 弃 了 funcion、return 以 及 { .. } ， 更 易于 编写 出 紧凑 的 函数 。 然 而 ， 箭 头 函 数 
通过 this 感 知 ( this-aware coding ) 从 根本 上 解决 了 一 个 特别 的 常见 痛 点 。 在 普通 的 ES5 函 数 中 ， 
每 一 个 新 函数 都 定义 了 自己 的 this 值 (在 构造 函数 中 是 新 对 象 ， 在 严格 模式 下 的 函数 调用 中 是 
undefinedQ， 如 果 是 以 对 象 方法 形式 调用 的 函数 ,， 则 是 上 下 文 对 象 …… )。JavaScript 函 数 总 是 有 
自己 的 this 值 ， 这 使 得 我 们 无 法 在 回调 函数 中 访问 外 围 方法 的 this。 要 想 搞 明白 这 个 问题 ， 考 
虑 下 面 的 例子 : 


Wy 




































































function CustomSstr(str)t{ 
te 


} 


CustomStr.prototype.add = function(s)t{ Ve 
'use strict'; 

return s.map(function (a)f{ A 

return this.str + a; 3 


9 
js 


Var customStr = new CustomSstr("Hello"); 
console.log(customSstr.add(["World"])); 
//Cannot read property 'str' of undefined 


在 标记 为 3 的 一 行 中 , 我 们 试图 获得 this .str， 但 是 匿名 函数 也 有 自己 的 this， 正 好 将 行 1 
方法 中 的 this 遮 盖 (shadow ) 了 。 要 想 在 ES5 中 修正 这 个 问题 ， 需 要 将 this 赋 给 一 个 变量 ， 然 
后 用 这 个 变量 来 代替 : 


function CustomStr (Str){ 
th et 

} 

CustomStr.prototype.add = function(s){ 
'use strict'; 


Var that = this; // --> 1 
return s.map(function (a)f{ // --> 2 
return that.str + a; A 


})s 
} 


Var customStr = new CustomSstr("Hello"); 


console.log(customSstr.add(["World"])); 
//["HelloWorld] 
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标记 为 1 的 行 中 , 我 们 将 this 赋 给 了 一 个 变量 that, 并 将 其 用 于 匿名 函数 中 , 这 样 就 能 够 引 
用 到 所 需要 的 上 下 文 的 this 值 了 。 

ES6 的 箭头 函数 有 一 个 词法 范围 的 this (lexical this )， 意 味 着 箭头 函数 能 够 获得 外 围 上 下 文 
( enclosing context ) 的 this 值 。 我 们 可 以 将 上 述 函 数 改 写成 等 价 的 箭头 函数 形式 : 





function CustomStr (StT) { 
tC 


} 
CustomStr.prototype.add = function(s)t{ 

return s.map((a)=> { 

return this.str + a; 

}); 
}; 
Var customStr = new CustomSstr("Hello"); 
console.log(customstr.add(["World"])); 
//["Helloworld] 


7.4 ”小结 


在 本 章 中 , 我 们 讨论 了 ES6 中 的 一 些 重要 的 新 特性 。 这 是 一 组 令 人 激动 的 新 语言 特性 和 范式 ， 
利用 polyfill 和 转换 编译 器 ,你 立刻 就 可 以 上 手 把 玩 。JavaScript 是 一 门 不 断 发 展 的 语言 ,理解 其 未 
来 发 展 很 重要 。ES6 所 增添 的 特性 使 得 JavaScript 变 得 愈 发 有 趣 和 成 熟 。 在 下 一 章 中 , 我 们 将 使 用 
jQuery 和 JavaScrip 深 入 探索 浏览 器 的 文档 对 象 模型 ( Document Object Model, DOM ) 操作 及 事件 。 
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DOM 操 作 与 事件 



































JavaScript 存 在 的 最 重要 原因 就 是 Web。JavaScript 是 一 门 属于 Web 的 语言 , 浏览 器 是 JavaScript 
表演 的 舞台 。 如 果 少 了 JavaScript， 我 们 看 到 的 就 只 能 是 静态 的 Web 页 面 。 在 本 章 中 ,我 们 将 深入 
挖掘 JavaScript 与 浏览 器 之 间 的 关联 , 理解 其 与 Web 页 面 各 组 成 部 分 之 间 的 交互 方式 , 学 习 文 档 对 
象 模型 ( Document Object Model，DOM ) 和 JavaScript 事 件 模型 。 














8.1 DOM 


在 本 章 中 ， 我 们 将 学 习 JavaScript 与 浏览 需 和 HTML 相 关 的 各 个 方面 。 我 相信 你 一 定 知道 ， 
HTML 是 用 于 编写 Web 页 面 的 一 种 标记 语言 。 不 同 的 标记 语言 有 不 同 的 用 途 。 流 行 的 标记 语言 包 
括 可 扩展 标记 语言 ( eXtensible Markup Language,XML ) 和 标准 通用 标记 语言 ( Standard Generalized 
Markup Language，SGML )。 除 了 这 些 通 用 型 标记 语言 ， 还 有 一 些 具有 特定 用 途 ( 比如 文本 处 理 
和 图 像 元 信息 ) 的 专用 标记 语言 。 超 文本 标记 语言 (HyperText Markup Language，HTML ) 是 用 
于 定义 Web 页 面 语 义 的 标准 标记 语言 。Web 页 面 实 际 上 就 是 一 份 文档 , DOM 提 供 了 这 份 文档 的 描 
述 信息 。 除 此 之 外 , 它 还 有 一 套用 于 存储 和 操作 文档 的 方法 。DOM 是 HTML 的 编程 接口 ， 人 允许 使 
用 JavaScript 等 脚本 语言 对 其 进行 结构 化 的 操作 。 文 档 的 结构 化 描述 也 是 由 DOM 提 供 的 ， 该 结构 
由 节点 和 对 象 组 成 。 节 点 拥有 属性 和 方法 ， 可 用 于 操作 节点 本 身 。 不 过 DOM 仅 仅 是 一 种 描述 ， 
并 非 编 程 构件 。 它 作为 一 种 模型 ， 供 能 够 处 理 DOM 的 语言 使 用 ， 如 JavaScript。 

















































































































8.1.1 访问 DOM 元 素 


大 多 数 情况 下 ， 你 需要 根据 某 些 业务 逻辑 访问 DOM 元 素来 检查 或 处 理 相 应 的 值 。 我 们 将 详 
细 讨 论 这 种 用 法 。 创 建 一 个 HTMIL 文 件 样 例 ， 内 容 如 下 : 





<html> 

<head> 
<title>DOM</title> 
</head> 

<body> 

<p>Hello World!</p> 
</body> 

</html> 





图 灵 社 区 会 员 天 元 (673756366@qq.com) 专 享 尊重 版 权 


8.1 DOM 139 








将 文件 保存 为 sample_dom.html。 在 Google Chrome 浏 览 器 中 打开 该 文件 ， 会 看 到 页 面 上 显示 
出 文本 Hello World。 现 在 ， 通 过 选项 中 的 | More Tools | Developer Tools ( 具体 步 又 可 能 会 随 操 作 
系统 或 浏览 需 的 版 本 而 不 同 ) 打开 Google Chrome Developer Tools。 在 Developer Tools 窗 口中 ， 会 
看 到 如 下 DOM 结 构 : 





Q | Elements | Network Sources 


了 <head> 
<title>DOM</title> 
</head> 
了 <body> 
<p>Hello World!</p> 
</body> 
</html> 




















搂 下 来 ， 可 以 向 页 面 中 插入 一 些 JavaScript 代 码 。 我 们 打算 在 页 面 载 人 后 调用 一 个 JavaScript 
也 数 。 这 可 以 通过 在 window .onload 上 调用 函数 来 实现 。 把 脚本 放 入 <script> 标 签 中 ,然后 将 
其 放 在 <head> 标 签 之 后 。 页 面 如 下 所 示 : 


<html> 
<head> 
<title>DOM</title> 
<script> 
// 当 文 档 载 入 完成 时 执行 该 函数 
window.onload = function() { 
Var doc = document .documentElement; 
Var body = doc.body; 
var _head doc.firstChilgd; 






































Var _body doc.lastChild; 
var _head_ = doc.childNodes[0]; 
Var title = _head.firstChilgd; 
alert(_head.parentNode === doc); //true 
} 
</script> 
</head> 
<body> 
<p>Hello World!</p> 
</body> 
</html> 
匿名 函数 会 在 浏览 需 载 和 人 页面 后 执行 。 在 这 个 函数 中 ， 的 
整个 HTML 文档 可 以 通过 aocument .documentElement 访 问 。 我 们 将 文档 保存 到 一 个 变量 中 。 


在 访问 文档 时 , 利用 文档 的 一 些 辅助 属性 来 遍历 这 些 节 点 。 我 们 使 用 aoc . > 
利用 chilgNodes 数 组 来 遍历 某 个 元 素 的 子 节点 ， 某 个 节点 的 第 一 个 和 最 后 一 个 子 节点 可 以 使 用 
firstchilg 和 1astchilg 属 性 访问 。 
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染 速 度 。 现代 浏览 器 都 支持 async 和 defer 属 性 ， 用 于 指示 浏览 

2 时 继续 泻 染 页 面 。 可 以 在 <zhead> 标 签 中 使 用 这 些 属性 , 无 需 再 担心 影响 性 能 。 

多 的 相关 信息 可 以 在 这 里 找到 : http://stackoverflow.com/questions/436411/ 
Oe emt le o 


| 不 推荐 在 <head> 标 签 中 使 用 阻塞 泻 染 的 JavaScript， 这 会 严重 拖 慢 页 面 的 泻 


8.1.2 访问 特定 的 节点 


核心 DOM 定 义 了 getElementsByTagName () 方 法 ， 它 能 够 返回 一 个 NodeList， 其 中 包含 
了 tagName 属 性 与 指定 值 相同 的 所 有 元 素 对 象 。 下 面 这 行 代码 会 返回 由 文档 中 所 有 <p/> 元 素 组 
成 的 列表 : 











Var paragraphs = document .getElementsByTagName('p'); 


HTML DOM 定义 了 getElementsByName () 方 法 , 能 够 检索 到 所 有 name 特 性 (attribute ) "与 
指定 值 相 同 的 元 素 。 考 虑 下 面 的 代码 片段 : 


<html> 
<head> 
<title>DOM</title> 
<script> 
showFeelings = function() { 
var feelings = document .getElementsByName ("feeling"); 
alert (feelings[0] .getAttribute("value")); 
alert (feelings[1] .getAttribute("value")); 
} 
</script> 
</head> 
<body> 
<p>Hello World!</p> 
<form method="post" action="/post"> 
<fieldset> 
<p>How are you feeling today?</p> 
<input type="radio" name="feeling" value="Happy" /> Happy<br /> 
<input type="radio" name="feeling" value="Sad" />Sad<br /> 
</fieldset> 
<input type="button" value="Submit" onClick="showFeelings()"/> 
</form> 
</body> 
</html> 


在 本 例 中 ， 我 们 创建 了 一 组 name 特 性 为 feeling 的 单 选 按 钮 。 在 函数 showFeelings () 中 ， 
获取 到 所 有 name 特 性 为 feeling 的 元 素 并 对 其 进行 迭代 。 


























J 为 了 便于 区 分 ， 本 书 中 将 property 译 为 “属性 ”， 将 attribute 译 为 “特性 ”。 一 -一 译 者 注 
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HTML DOM 还 定义 了 另 一 个 叫 作 getElementByIa () 的 方法 。 在 访问 特定 元 素 的 时 候 ， 这 
个 方法 非常 有 用 。 它 根据 元 素 的 ia 进 行 查找 。ia 特 性 对 于 每 个 元 素 都 是 唯一 的 ， 因 此 这 种 查找 过 
程 速度 非常 快 , 优 于 getElementsByName () 。 不 过 要 留意 的 是 浏览 器 并 不 保证 iq 特 性 的 唯一 性 。 
在 下 面 的 例子 中 ， 我 们 利用 ID 来 访问 特定 的 元 素 。 与 标签 或 name 特 性 相反 ， 元 素 的 ID 是 唯一 的 : 
<html> 
<head> 
<title>DOM</title> 
<script> 
window.onload= function() { 
Var greeting = document .getElementById("greeting"); 
alert (greeting.innerHTML); // 显 示 提示 框 "Hello World" 
} 
</script> 
</head> 
<body> 
<p id="greeting">Hello World!</p> 
<p id="identify">Earthlings</p> 
</body> 
</html> 
到 目前 为 止 , 我 们 讨论 的 都 是 JavaScript 中 DOM 遍 历 的 基础 知识 。 随 着 DOM 的 结构 及 其 操作 
变 得 愈 发 复杂 ,这 些 用 来 遍历 和 访问 的 函数 所 发 挥 的 作用 就 有 限 了 。 有 了 这 些 基 础 ， 就 可 以 介绍 
一 个 叫 作 jQuery 的 库 ， 它 可 用 于 DOM 遍 历 〈( 还 有 其 他 用 途 )， 功 能 极其 强大 。 


jQuery 是 一 个 轻 量 级 的 库 , 旨 在 简化 常见 的 浏览 需 操 作 。 这 些 常 见 操作 包括 DOM 遍 历 及 操作 、 
事件 处 理 、 动 画 和 Ajax， 如 果 使 用 纯 JavaScript 来 实现 的 话 ， 那 可 是 一 个 令 人 乏味 的 过 程 。jQuery 
为 你 提供 了 易 用 和 更 简短 的 辅助 工具 机 制 ,帮助 你 简单 快速 地 掌握 这 些 常见 操作 ,尽管 功 能 丰富 ， 
考虑 到 本 章 的 侧重 点 ， 我 们 主要 关注 DOM 操 作 和 事件 。 

有 两 种 方法 可 以 将 jQuery 添加 到 HTML 中 : 通过 直接 从 内 容 分 发 网 络 ( content delivery 


network，CDN ) 载 和 脚本 ,或 是 手动 下 载 库 文件 并 将 其 放 入 <script> 标 签 。 下 面 的 例子 展示 了 
如 何 从 Google 的 CDN 中 下 载 :jQuery: 











































































































<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/ 
jquery .min.js"></script> 
</head> 
<body> 
</body> 
</html> 


使 用 CDN 下 载 的 优势 在 于 ，Google 的 CDN 能 够 自动 为 你 找到 距离 最 近 的 下 载 服 务 器 ， 保 持 
jQuery 库 处 于 最 新 的 稳定 状态 。 如 果 你 希望 下 载 并 手动 将 jQuery 安装 在 自己 的 网 站 中 ， 可 以 加 入 
如 下 内 容 : 
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ouript :Sri /liD/TOuery I Ss Gri 


在 本 例 中 ，jQuery 库 被 手动 下 载 到 了 了 lib 目录。 在 HTML 页 面 中 设置 好 jQuery 之 后 ， 就 让 我 们 
一 探 那 些 可 用 来 操作 DOM 元 素 的 方法 吧 。 考 虑 下 面 的 例子 : 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/ 
jquery .min.js"></script> 
<script> 
$ (document) .ready (function() { 
$('#greeting') .html('Hello World Martian'); 
}); 
</script> 
</head> 
<body> 
<p id="greeting">Hello World Earthling ! </p> 
</body> 
</html> 
向 HTML 页 面 中 加 入 jQuery 之 后 ， 我 们 编写 了 一 个 定制 的 JavaScript 脚 本 ， 用 于 选择 也 为 
greeting 的 元 素 并 改变 对 应 的 值 。s () 中 样子 有 些 陌生 的 代码 就 是 用 来 完成 这 项 任务 的 jQuery。 
如 果 阅 读 jQuery 的 源 代码 ( 你 应 该 去 读 读 ， 简 直 太 棒 了 )， 会 发 现 最 后 一 行 : 
// 将 jouery 暴 露 给 全 局 对 象 
window.jQuery = window.s$ = jQuery; 
$s 只 是 一 个 函数 ， 它 是 名 为 jQuery 的 函数 的 别名 。s 就 是 一 个 语法 糖 ， 为 了 使 代码 紧凑 而 已 。 
实际 上 可 以 交替 使 用 $ 和 jQuery。 例如 ,$s ('#greeting') .html('Hello World Martian'); 
和 jQuery ('#greeting') .html('Hello Worlda Martian') ;的 效果 是 一 样 的 。 


只 有 在 页 面 完全 载 人 之 后 才能 使 用 jQuery。 因 为 jQuery 需要 知道 DOM 结 构 的 所 有 节点 ， 所 以 
完整 的 DOM 必 须 处 于 内 存 中 。 为 了 确保 页 面 完全 载 人 并 进入 可 操作 状态 ， 我 们 可 以 使 用 
$ (document) .ready () 函数 。 下 面 的 IFE 只 会 在 整个 页 面 已 经 准备 完毕 (ready ) 之 后 才 执 行 : 


$ (document) .ready (function() { 

$('#greeting') .html ('Hello World Martian'); 
站 放权 
这 段 代 码 展示 了 如 何 将 一 个 函数 与 jQuery 的 .ready () 函数 关联 在 一 起 。 这 个 函数 会 在 文档 
准备 好 之 后 执行 。 我 们 使 用 $ (document ) 为 页 面 文档 创建 一 个 对 应 的 jQuery 对 象 ， 然 后 在 jQuery 
对 象 上 调用 .ready () ， 并 将 其 传人 待 执行 的 函数 : 


这 种 操作 在 使 用 jQuery 时 极为 常见 ， 以 至 于 它 拥有 相应 的 简写 方式 。 可 以 用 简短 的 $ () 调用 
来 代替 整个 ready () : 
$s(function() { 


$('#greeting') .html ('Hello World Martian'); 
jy): 
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s$() 是 jQuery 中 最 重要 的 函数 。 它 通常 接受 CSS 选 择 器 作为 唯一 的 参数 , 返回 一 个 新 的 jQuery 
对 象 ， 该 对 象 指向 选择 器 所 匹配 到 的 对 应 页 面 元 素 。 三 种 主要 的 选择 器 是 标签 名 、ID 和 类 。 它 
们 既 可 以 单独 使 用 ， 也 可 以 结合 使 用 。 下 面 一 些 简单 的 例子 演示 了 这 三 种 选择 器 在 代码 中 的 使 
用 方式 : 









































选择 器 CSS 选 择 器 jQuery 选择 器 选择 器 的 选择 结果 
示 签 pt{} $('p') 选中 文档 中 所 有 的 p 标 签 
ID #div_1 $('#div_1') 选中 文档 中 ID 为 Giv_1 的 单个 元 素 。 用 于 表示 岂 匹 配 的 符号 是 # 
类 .bold_fonts $('.bold_ fonts') 选中 文档 中 CSS 类 为 bolq_fonts 的 所 有 元 素 。 用 于 表示 类 匹配 
的 符号 是 . 


CSS 选 择 器 是 jQuery 的 运行 基础 。 


因为 CSS 选 择 器 并 不 在 本 书 的 讨论 范围 中 ， 所 以 建议 你 到 http://www.w3.org/ 
TR/CSS2/selector.html 学 习 相 关 的 概念 。 





我 们 假设 你 熟悉 HTML 标 签 及 语法 。 下 面 的 例子 涵盖 了 jQuery 选择 器 的 基本 使 用 方法 : 





tn 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/ 
jquery .min.js"></script> 
<script> 
$s(function() { 
$('h1i').html (function(index, oldHTML){ 
return oldHTML + "Finally?"; 
}); 
$('h1i').addClass('highlight-blue'); 
$('#header > hil ').css('background-color', 'cyan'); 
$('ul li:not(.highlight-blue)').addClass('highlight-green'); 
$('tr:nth-child(odd)').addClass('zebra'); 
}); 
</script> 
<style> 
.highlight-blue { 
color: blue; 
} 
.highlight-greent{ 
color: green; 
} 
.Zebral{ 
background-color: #666666; 
color: white; 
lj 
</style> 
</head> 
<body> 
<div id=header> 
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<h1i>Are we there yet ? </hi> 
<span class="highlight"> 
<p>Journey to Mars</p> 
A 
<l1i>First</1i> 
<li>Second</1i> 
<11 class="highlight-blue">Third</1i> 
</ul> 
</span> 
<table> 
<tr><th>Id</th><th>First name</th><th>Last Name</th></tr> 
<tr><td>1</td><td>Albert</td><td>Einstein</td></tr> 
<tr><td>2</td><td>Issac</td><td>Newton</td></tr> 
<tr><td>3</td><td>Enrico</td><td>Fermi</td></tr> 
<tr><td>4</td><td>Richard</td><td>Feynman</td></tr> 
</table> 
</div> 
</body> 
</html> 


在 本 例 中 ， 我 们 使 用 选择 器 选中 了 HTMLIL 页 面 中 多 个 DOM 元 素 。 我 们 有 一 个 内 容 为 Are we 
there yet? 的 于 1 标题 ; 当 页面 载 人 时 ，jQuery 脚 本 会 访问 所 有 的 HI 标题 并 在 其 后 追加 文本 


Finally?: 





$s('hli').html (function(index, oldHTML){ 

return oldHTML + "Finally 2?"; 

} a; 
$ .html () 函数 会 为 日 标 元 素 设置 HTML 一 一 在 本 例 中 就 是 Hl 标题 。 男 外 ， 我 们 还 选中 了 所 

有 的 Hl 标题 并 为 其 应 用 了 CSS 样 式 类 highlight-blue。s('h1').addClass('highlight- 

blue' ) 语 句 选 中 所 有 的 Hl 标题 ， 使 用 $ .addclass (<CSS class>) 方 法 为 选中 的 所 有 元 素 应 用 

CSS 类 。 





























我 们 使 用 子 结合 符 ( child combinator，> ) 配合 $ .css () 函数 来 定制 CSS 样 式 。$ () 函数 中 的 
选择 器 实际 上 是 说 :“ 所 找到 标题 (hl ) 需要 有 一 个 ID 为 header ( #header ) 的 子 元 素 (> ) ”对 
于 每 一 个 这 样 的 元 素 ， 我 们 都 应 用 一 个 定制 的 CSS 样 式 。 接 下 来 的 这 种 用 法 值得 注意 。 考 虑 下 面 
这 行 代码 : 











$('ul li:not(.highlight-blue)').addClass('highlight-green'); 


我 们 选择 了 所 有 不 包含 highlight -blue 类 的 列表 元 素 ( 1i ), 为 其 应 用 highlight-green 
类 。 最 后 一 行 一 一 $ ('tr:nthchild(odd)') .addCclass('zepra') 的 意思 是 : 为 所 有 是 奇数 
的 表格 行 (tr ) 应 用 zebra 类 。 选 择 需 nth-child 是 一 个 由 jQuery 所 提供 的 定制 选择 器 。 最 终 的 输 
出 结果 类 似 于 下 图 ( 尽管 展示 了 多 种 jQuery 选择 器 类 型 ， 但 显然 jQuery 并 不 能 代替 差劲 的 设计 
品味 ): 
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Are we there yet ? Are we there yet ? 


Journey to Mars 


。 First 
。 Second 
»。 Third 


dlFirst name|Last Name 


1 Albert Einstein 


2 [ssac |Newton 


3 Enrico Fermi 


Feynman 


一 旦 做 好 了 选择 ， 接 下 来 就 有 两 类 方法 可 以 在 被 选中 的 元 素 上 调用 ， 这些 方法 就 是 接收 器 
( getter ) 与 设置 器 ( setter )。 接 收 器 可 以 从 所 选 内 容 中 接收 信息 ， 设 置 器 可 以 通过 某 种 方式 改变 
所 选 内 容 。 


接收 器 通常 只 处 理 所 选 内 容 中 的 第 一 个 元 素 ， 而 设置 器 则 处 理 所 选 内 容 中 所 有 的 元 素 。 设 置 
器 利用 隐 式 迭代 (implicit iteration ) 自动 遍历 选中 的 所 有 元 素 。 


例如 , 我 们 想 对 页 面 中 所 有 的 列表 项 应 用 一 个 CSS 类 。 当 我 们 在 选择 器 上 调用 aadaclass 时 ， 
它 会 自动 应 用 到 所 选中 的 所 有 元 素 上 。 这 就 是 隐 式 迭代 的 做 法 : 

S( 'li' ).addCclass( highlighted' ); 

但 有 时 候 你 并 不 想 通 过 隐 式 迭代 遍历 所 有 的 元 素 , 只 是 希望 有 选择 地 修改 少数 几 个 元 素 。 可 


以 使 用 .each() 方 法 对 元 素 进 行 显 式 迭代 。 在 下 面 的 代码 中 ,我 们 利用 元 素 的 index 属 性 ， 选 择 
处 理 部 分 元 素 : 










































































$( '1i' ).each(function( index, element ) { 
if(irndex $s 2 =="0) 
$s (elem) .prepend( '<b>' + STATUS + '</b>' ); 
上 水分 


8.2” 链 式 方 法 


jQuery 的 链 式 方法 能 够 让 你 在 不 需要 临时 存储 中 间 结 果 的 情况 下 , 在 选择 内 容 上 连续 调用 一 
系列 方法 。 这 种 操作 可 行 的 原因 在 于 ,每 个 调用 的 设置 器 方法 都 会 返回 它 处 理 过 的 选择 内 容 。 这 
是 一 种 非常 强大 的 特性 ， 很 多 专业 库 中 都 用 到 过 。 考 虑 下 面 的 例子 : 

$( '#button submit' ) 

.click(function() { 


$( this ).addClass( 'submit_clicked' ); 
}) 
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.find( '#notification' ) 
.attr( 'title', 'Message Sent' );x 


在 这 段 代 码 中 ， 我们 在 选择 器 上 链 式 调用 了 click()、find() 和 attr() 方 法 。click() 方 
法 先 执 行 ， 结束 之 后 再 由 find() 方法 找 出 ID 为 notification 的 元 素 ， 并 将 其 title 属性 修改 为 
字符 串 。 











8.3 遍历 与 操作 


我 们 讨论 了 使 用 jQuery 选择 元 素 的 各 种 方法 , 接 下 来 学 习 使 用 jQuery 对 选择 内 容 进行 DOM 遍 
历 及 操作 的 方法 。 如 果 用 原生 的 DOM 操 作 完 成 这 些 任务 的 话 ， 那 可 是 相当 乏味 的 过 程 。jQuery 
使 得 这 一 切 变 得 既 直 接 又 优雅 。 


在 深入 了 解 这 些 方法 之 前 , 我 们 先 来 熟悉 一 点 今后 要 用 到 的 HTML 术 语 。 考虑 下 面 的 HTML: 


























<ul> <-This is the parent of both '11' and ancestor of everything in 
<11> <-The first (11) is a childq of the (ul) 
<span> <-this is the descendent of the ‘ul' 
<i>Hello</i> 
</span> 
</1i> 
<li>World</1i> <-both '11' are siblings 
</ul> 


利用 jQuery 的 遍历 方法 , 我 们 可 以 选中 第 一 个 元 素 , 然后 遍历 与 其 相关 的 DOM 元 素 。 在 遍历 
DOM 的 过 程 中 ， 我 们 可 以 修改 最 初 选 择 的 内 容 ， 要 么 用 新 内 容 蔡 换 ， 要 么 修改 原 有 选择 。 


例如 ， 你 可 以 过 滤 已 有 的 选择 ， 使 其 中 只 包括 符合 某 些 条 件 的 元 素 。 考 虑 下 面 的 例子 : 


var list = $( '1i' ); // 选择 所 有 的 1i 元 素 

// 过 滤 出 含有 highlight 类 的 1i 元 素 

Var highlighted = list.filter( '.highlignht ); 
// 过 滤 出 不 含有 highlight 类 的 1i 元 素 

var not_ highlighted = list.not( '.highlight ); 


可 以 使 用 jQuery 添加 或 删除 元 素 的 类 。 如 果 想 切换 元 素 的 类 ， 可 以 使 用 toggleclass () 方 法 : 

















$( '#usename' ).addClass( 'hidden' ); 
$( '#usename' ) .removeClass( 'hidden' ); 
$( '#usename' ) .toggleClass( 'hidden' ); 


大 多 数 情况 下 ， 你 可 能 需要 频繁 地 修改 元 素 的 值 。 可 以 利用 val () 方 法 来 实现 。 例 如， 下 面 
这 行 代码 改变 了 所 有 类 型 为 Lext 的 表单 元 素 的 值 : 





$s( 'input[ltype="text"]' ).val( 'Enter usename:' ); 


要 修改 元 素 特 性 ， 可 以 使 用 attr () 方 法 : 
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Sa attt MELCLe yy CLLR 3 


在 处 理 DOM 操 作 时 , jQuery 的 能 力 深 不 可 测 。 考虑 到 本 书 篇 幅 的 限制 , 我 们 无 法 详细 地 讨论 
所 有 的 用 法 。 


8.4 ”处理 浏览 器 事件 


在 进行 浏览 需 相 关 的 开发 时 ， 必 须 处 理 用 户 交 互 及 其 关联 的 事件 ， 比 如 文本 框 中 的 输入 、 页 
面 滚动 、 鼠 标点 击 等 。 当 用 户 在 页 面 上 执行 了 某 些 操作 ， 就 会 发 生 事件 。 有 些 事件 并 不 是 由 用 户 
交互 行为 触发 的 ， 例 如 ，1oagd 事 件 就 不 需要 用 户 输入 。 


在 处 理 浏览 器 中 的 鼠标 或 键盘 事件 时 ， 你 无 法 预测 这 些 事件 将 在 什么 时 候 以 什么 顺序 发 生 ， 
只 能 不 停 地 查看 是 否 有 键盘 点 击 或 鼠标 移动 出 现 。 这 就 像 是 在 后 台 运行 了 一 个 永 不 停止 的 循环 ， 
负责 侦 听 是 否 有 键盘 或 鼠标 事件 发 生 。 在 传统 编程 中 ， 这 叫 作 轮 询 〈polling )。 轮 询 的 形式 有 很 
多 种 ， 可 以 使 用 队列 来 优化 等 待 线程 ; 但 轮 询 仍 然 算 不 上 是 一 种 好 的 思路 。 


浏览 器 提供 了 另 一 种 比 轮 询 更 好 的 方法 , 这 种 方法 能 够 以 可 编程 的 方式 应 对 事件 的 发 生 。 这 
类 用 于 事件 处 理 的 钩子 (hook ) 通常 叫 作 侦 听 需 (listener )。 你 可 以 注册 一 个 应 对 特定 事件 的 侦 
听 器 ， 在 事件 被 触发 时 执行 与 之 关联 的 回调 函数 。 考 虑 下 面 的 例子 : 







































































<script> 
addEventListener("click", function() { 


相 
</script> 
adqEventListener 国 数 将 第 二 个 参数 注册 成 回调 函数 , 它 会 在 由 第 一 个 参数 指定 的 事件 被 
触发 时 执行 。 


我 们 现在 看 到 的 是 一 个 针对 click 事 件 的 通用 侦 听 咒 。 与 此 类 似 ， 每 个 DOM 元 素 都 有 自己 
的 aqaqgventListenet 方 法 ， 人 允许 侦 听 特定 的 元 素 : 


<button>Submit</button> 

<p>No handler here.</p> 

<script> 
Var button = document .getElementById("#Bigbutton"); 
button.addEventListener("click", function() { 

console.log("Button clicked."); 

由 学 

</script> 


在 本 例 中 ,我们 通过 调用 getElementByIgd() 得 到 了 一 个 I 有 D 为 Bigbutton 的 按钮 的 引用 。 
在 该 元 素 的 引用 上 调用 addEventListener(), 为 click 事 件 注册 了 一 个 事件 处 理 函 数 。 在 Mozilla 
Firefox 或 Google Chrome 等 现代 浏览 器 中 ， 这 上 段 代码 没有 任何 问题 。 但 是 在 IE9 之 前 的 版 本 中 就 不 
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管用 了 。 原 因 在 于 微软 没有 遵循 W3C 标 准 ， 而 是 实现 了 自 定义 的 attachEvent () 方 法 。 这 意味 
着 你 不 得 不 依靠 一 些 很 麻烦 的 技巧 来 处 理 特定 浏览 器 的 怪异 行为 。 








8.5 事件 传播 


现在 我 们 要 问 一 个 重要 的 问题 : 如 果菜 个 元 素 及 其 祖先 都 注册 了 同一 事件 的 事件 处 理 程 序 ， 
哪个 事件 处 理 程序 会 先 被 触发 ”考虑 下 面 的 示意 图 : 











Element1 


Element2 


ejal@lle <0) 


lejal@i le],<®, 














Element2 是 Elementl1 的 子 元 素 , 两 者 都 拥有 onc1lick 事 件 处 理 程序 。 当 用 户 点 击 Element2 时 ， 
Element2 和 Element1 上 的 onclick 都 会 被 触发 ， 但 问题 是 谁 先 谁 后 ? 事件 发 生 的 顺序 是 怎样 的 ? 
遗憾 的 是 ， 答 案 完 全 依赖 于 浏览 器 。 说 到 浏览 器 ， 自 然 有 两 个 阵营 : 网 景 与 微软 。 


网 景 认 为 第 一 个 触发 的 事件 应 该 是 Element1 上 的 onclick， 这 种 事件 顺序 称 为 事件 捕获 。 
微软 认为 第 一 个 触发 的 事件 应 该 是 Element2 上 的 onclick， 这 种 事件 顺序 称 为 事件 崩 泡 。 


这 是 两 种 完全 相反 的 浏览 器 事件 处 理 观 点 及 实现 。 为 了 结束 这 种 混乱 ， 万 维 网 协会 (W3C ) 
采用 了 一 种 明智 的 中 间 路 线 。 在 新 的 模型 中 , 事件 先进 入 捕获 阶段 ,到 达 目 标 元 素 之 后 再 向 上 进 
入 冒 泡 阶段 。 在 这 种 标准 行为 中 , 你 可 以 选择 将 事件 处 理 程序 注册 到 捕获 阶段 或 是 骨 泡 阶段 。 如 
果 adgdEventListener () 的 最 后 一 个 参数 是 true, 则 事件 处 理 程序 注册 在 捕获 阶段 ; 如 果 是 false， 
则 注册 在 冒 泡 阶段 。 


有 时 候 , 在 事件 已 经 被 子 元 素 处 理 过 之 后 ,你 并 不 想 让 其 父 元 素 再 经 手 了 。 你 可 以 在 事件 对 
象 上 调用 stopPropagation() 方 法 ， 阻止 事件 处 理 程序 进一步 接收 该 事件 。 有 些 事件 有 与 之 关 
联 的 默认 行为 。 例如 当 你 点 击 了 一 个 URL 链 接 , 会 被 带 向 链接 的 目标 地 址 。JavaScript 事 件 处 理 程 
序 会 在 默认 行为 被 执行 前 调用 。 你 可 以 在 事件 对 象 上 调用 preventDefault () 方 法 来 阻止 执行 默 
认 行 为 。 

在 浏览 器 中 使 用 普通 的 JavaScript 时 , 这 些 都 是 事件 基础 。 但 这 样 做 存在 一 个 问题 。 浏览 器 在 
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事件 处 理 行为 方面 的 名 声 实 在 不 怎么 样 。 我 们 接 下 来 要 看 看 jQuery 的 事件 处 理 。 为 了 简化 处 理 过 
程 ，jQuery 总 是 将 事件 处 理 程序 注册 在 冒 泡 阶段 。 这 意味 着 最 具体 的 元 素 能 够 最 先 响 应 事件 。 





8.6 jQuery 事件 处 理 及 传播 





jQuery 事件 处 理 考虑 到 了 浏览 需 很 多 的 怪异 行为 ， 你 可 以 将 注意 力 放 在 代码 编写 上 。jQuery 
对 于 浏览 器 事件 的 支持 既 简 单 又 直接 。 例 如 ， 下 面 的 代码 负责 侦 听 用 户 点 击 页 面 上 任何 按钮 





S('button').click(function(event) 

















{ 


console.log('Mouse button clicked'); 


je 





与 click() 方 法 类 似 , 还 有 其 他 一 些 辅助 方法 ,涵盖 了 几乎 所 有 类 型 的 浏览 器 事件 。 这 些 方 

















法 包括 : 


LU 
change 
click 
dblclick 
error 
focus 
keydown 
keypress 
keyup 
load 
ousedown 
ousemove 
ouseout 


人 USGGBVBEE 





ouseup 
resize 
SEEOLL 


select 


DOOOOOOOOOOOOOoOOoOOO DO 


submit 


OD 


unload 











用 on () 方 法 也 可 以 来 处 理 定制 事件 。 


你 也 可 以 使 用 .on() 方 法 ,该 方法 更 灵活 ， 它 能 够 为 多 个 事件 绑 定 同一 个 事件 处 理 程序 。 利 
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和 其 他 方法 一 样 ， 将 事件 名 作为 第 一 个 参数 传 给 on () 方 法 : 


S(TDbuttonm) ont( "click, functionm( event;.) 二 
console.log(' Mouse button clicked'); 


:3 
为 元 素 注册 好 事件 处 理 程序 之 后 ， 就 可 以 触发 该 事件 了 : 








$('button') .trigger( 'click' ); 

也 可 以 这 样 触发 事件 : 

$('button') .click(); 

jQuery 的 .off () 方 法 可 用 于 解除 事件 绑 定 ， 该 方法 可 以 移 除 绑 定 到 特定 事件 上 的 任何 事件 
处 理 程序 : 

$('button') .off( "click，); 


你 可 以 向 一 个 元 素 添加 多 个 事件 处 理 程 序 : 











$ ("#element") 
.on("click", firstHandler) 
.on("click", secondHandler); 


事件 触发 时 ， 这 两 个 事件 处 理 程序 都 会 被 调用 。 如 果 你 只 想 移 除 第 一 个 事件 处 理 程序 ， 可 以 
使 用 off () 方 法 ， 将 要 移 除 的 那个 事件 处 理 程序 作为 第 二 个 参数 : 

$("#element) .off ("click",firstHandler); 

如 果 你 有 指向 事件 处 理 程序 的 引用 , 选择 这 种 做 法 没有 问题 。 如 果 事 件 处 理 程序 采用 的 是 匿 
名 函数 ,是 无 法 得 到 对 应 的 引用 的 ,在 这 种 情况 下 , 你 可 以 使 用 命名 空间 事件 (namespaced event )。 
考虑 下 面 的 例子 : 


$s("#element") .on("click.firstclick",function() { 
Console,.log("first click"); 

















)) 
现在 你 拥有 了 一 个 注册 在 该 元 素 上 的 命名 空间 事件 处 理 程序 ， 可 以 采用 如 下 方式 移 除 : 





S$("#element) .offt("clicKk.firstclLick" ) ; 
采用 .on () 方 法 的 一 个 主要 优势 在 于 可 以 一 次 性 绑 定 多 个 事件 。 你 可 以 传人 多 个 以 空格 分 隔 
的 事件 名 称 。 考 虑 下 面 的 例子 : 


$('#inputBoxUserName') .on('focus blur', function() { 
console.log( Handling Focus or blur event' ); 


下 站 学 
你 可 以 为 多 个 事件 添加 多 个 事件 处 理 程序 : 
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$s( "#heading" ) .on({ 
mouseenter: function() { 
console.log( "mouse entered on heading" ); 
} 
mouseleave: function() { 
console.log( "mouse left heading" ); 
} 
click: function() { 
console.log( "clicked on heading" ); 
l 
上 


在 jQuery 1.7 中 ， 所 有 事件 都 是 通过 on ( ) 方 法 绑 定 的 ， 即 便 你 调用 了 如 click () 之 类 的 辅助 
方法 。 在 内 部 ，jQuery 会 将 这 些 调用 都 映射 到 on ( ) 方 法 。 正 因为 如 此 ， 一 般 推荐 使 用 on ( ) 方法 
来 确保 一 致 性 以 及 更 快 的 执行 速度 。 





















































8.7 事件 委托 


事件 委托 允许 我 们 将 单个 事件 侦 听 器 添加 到 父 元 素 上 。 所 有 匹配 选择 器 的 后 代 元 素 都 能 够 触 
发 该 事件 ， 即 使 这 些 后 代 元 素 此 刻 〈 在 绑 定 侦 听 器 之 时 ) 尚未 创建 。 


我 们 之 前 讨论 过 事件 冒 泡 。jQuery 中 的 事件 委托 主要 依靠 的 就 是 事件 冒 泡 。 只 要 页 面 上 发 生 
了 事件 , 该 事件 就 会 从 所 源 自 的 元 素 向 上 冒 泡 ， 直 到 其 父 元 素 , 然后 再 到 父 元 素 的 父 元 素 ， 以 此 
类 推 ， 直至 根 元 素 (window )。 考虑 下 面 的 例子 : 


<html> 
<body> 
<div id="container"> 

< 三 "本 七 二 
<li><a href="http://google.com">Google</a></1i> 
<li><a href="http://myntra.com">Myntra</a></1i> 
<li><a href="http://bing.com">Bing</a></1i> 

</ul> 



































</div> 
</body> 
</html> 


假设 我 们 希望 在 点 击 URL 时 执行 一 些 公 共 操 作 ( common action )， 可 以 选择 为 列表 中 所 有 的 
a 元 素 添加 事件 处 理 程序 : 
$( "#1list a" ).on( "click", function( event ) { 


console.log( $( this ).text() ); 
I 


这 种 做 法 完全 没有 问题 ， 不 过 代码 中 存在 一 个 小 bug。 如 果 男 一 个 动态 生成 的 URL 被 添加 到 
列表 中 的 话 ， 会 怎么 样 呢 ? 假设 我 们 有 一 个 Add 按 钮 ， 可 以 用 来 向 列表 中 添加 新 的 URL。 这 样 一 
来 ， 如果 新 的 URL 作 为 列表 项 加 入 , 那么 之 前 的 事件 处 理 程序 是 无 法 绑 定 到 新 的 列表 项 上 的 。 例 
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如 ， 下 面 的 链接 被 动态 地 加 入 到 了 列表 中 ， 点 击 链接 ， 并 不 会 触发 已 添加 过 的 事件 处 理 程序 : 
<li><a href="http://yahoo.com">Yahoo</a></1i> 
这 是 因为 事件 只 会 在 调用 on ( ) 方法 时 注册 。 在 这 种 情况 下 ,新 元 素 在 调用 .on () 时 并 不 存在 ， 
因此 也 就 无 法 绑 定 事件 处 理 程序 。 如 果 我 们 理解 了 事件 冒 泡 ， 就 能 够 想象 得 出 事件 会 沿 着 DOM 
树 向 上 传播 。 只 要 点 击 了 任意 一 个 URL， 就 出 发 生 以 下 传播 过 程 : 



































a(click)->1i->ul#list->div#container->body->html->root 
我 们 可 以 创建 一 个 委托 事件 : 


$s( "#1list" ).on( "click", "a", function( event ) { 
console.log( $( this ) .text() ); 
局 下 


我 们 将 a 从 最 初 的 选择 器 变 成 了 on ( ) 方 法 的 第 二 个 参数 。 这 个 参数 告诉 事件 处 理 程序 监听 特 
定 事件 , 并 检查 触发 该 事件 的 元 素 是 否 和 第 二 个 参数 相同 ( 在 这 个 例子 中 是 a )。 如 果 相 同 ,， 则 热 
行事 件 处 理 程序 。 有 了 委托 事件 ,我们 就 只 需要 给 整个 ul#1ist 绑 定 一 个 事件 处 理 程序 就 可 以 了 。 
这 个 事件 处 理 程序 将 侦 听 由 ul 元 素 的 后 代 元 素 所 触发 的 click 事 件 。 






































8.8 事件 对 象 


到 目前 为 止 , 我 们 都 是 将 匿名 函数 作为 事件 处 理 程序 。 为 了 使 事件 处 理 程序 具有 普 适 性 ， 可 
以 创建 命名 函数 并 将 其 分 配给 事件 。 考 虑 下 面 的 代码 : 
function handlesClicks (event) { 
// 处 理 click 事 件 


} 
$s("#bigButton") .on('click', handlesClicks); 


这 里 我 们 并 没有 使 用 匿名 函数 ， 而 是 将 一 个 命名 函数 传 给 了 on () 方 法 。 现 在 把 注意 力 转 到 
函数 的 event 参 数 上 。jQuery 会 给 所 有 的 事件 回调 程序 传人 一 个 事件 对 象 。 事 件 对 象 中 包含 了 被 
触发 事件 的 很 多 非常 有 用 的 信息 。 如 果 我 们 想 禁止 元 素 的 默认 行为 ， 可 以 使 用 事件 对 象 的 
preventDefault () 方 法 。 例 如 ， 我 们 想 要 触发 一 个 AJAX 请 求 ， 而 不 是 一 个 完整 的 表单 提交 ， 
或 者 是 希望 阻止 点 击 URL 时 跳 转 到 指向 的 位 置 。 在 这 些 情况 下 ， 你 可 能 还 想 阻 止 事 件 在 DOM 中 
向 上 冒 泡 ， 这 可 以 通过 调用 事件 对 象 的 stopPropagation() 方 法 来 实现 。 考 虑 下 面 的 例子 : 
























































S( "#loginform" ).on( "submit", function( event ) { 
// 阻止 表单 的 默认 的 提交 行为 
event .preventDefault (); 
// 阻止 事件 在 DOM 树 中 向 上 冒 泡 ， 停 止 所 有 的 委托 

event .stopPropagation(); 


}); 
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除了 事件 对 象 ， 你 还 可 以 获得 触发 事件 的 DOM 对 象 的 引用 。 可 以 通过 $ (this) 来 引用 该 元 
素 。 考 虑 下 面 的 例子 : 


$( "a" ).click(function( event ) { 
Var anchor = $( this ); 
if ( anchor.attr( "href" ) .match( "google" ) ) { 


event .preventDefault (); 
} 
上 


8.9 小 结 


JavaScript 最 重要 的 角色 就 是 作为 一 门 浏览 器 语言 , 本 章 全 部 内 容 都 围绕 着 这 一 主题 。 通 过 在 
浏览 器 中 提供 DOM 操 作 和 事件 管理 能 力 ，JavaScript 为 Web 页 面 引 入 了 丰富 多 彩 的 变化 。 我 们 在 
使 用 和 不 使 用 jQuery 的 情况 下 讨论 了 这 些 概 念 。 随 着 现代 化 Web 的 需求 日 益 增长 ， 采 用 jQuery 这 
类 库 是 非常 必要 的 。 这 些 库 能 够 极 大 地 提高 代码 质量 及 效率 , 同时 可 以 让 你 放心 地 把 注意 力 放 在 
重要 的 方面 。 

接 下 来 要 关注 的 是 JavaScript 的 男 一 种 实现 形式 一 一 主要 是 在 服务 器 端 。Node.js 已 经 成 为 一 
个 流行 的 JavaScript 框 架 ， 用 于 编写 可 伸缩 的 服务 器 端 应 用 程序 ， 我 们 将 详细 讲述 如 何 充 分 利用 
Nodejs 来 编写 服务 器 端 应 用 程序 。 
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服务 器 端 JavaScript 











到 目前 为 止 , 我 们 一 直 都 在 关注 JavaScript 作 为 一 门 浏览 器 语言 所 展现 出 的 多 功能 性 。 尤 为 值 
得 一 提 的 是 ,JavaScript 的 晶 越 表现 使 其 在 可 伸缩 的 服务 器 系统 编写 方面 轨 露 头角 , 大 受 欢 迎 。 在 
本 章 中 ， 我 们 将 学 习 Nodejs。Node.js 是 当前 最 流行 的 用 于 服务 器 端 编程 的 JavaScript 框 架 。 除 此 
之 外 ， 它 还 是 GitHub 上 最 受 关注 的 项 目 ， 拥 有 强大 的 社区 支持 。 


Node 使 用 V8 来 支持 服务 器 端 编 程 ，V8 正 是 Goolge Chrome 所 使 用 的 虚拟 机 。V8 大 大 提升 了 
Node 的 性 能 ， 因 为 它 能 够 将 JavaScript 直 接 编译 成 原生 的 机 器 码 ， 这 种 方式 要 优 于 执行 字 节 码 或 
是 使 用 解释 器 作为 中 间 件 。 


V8 的 强大 功能 加 上 JavaScript 简 直 是 天 作 之 合 
Node 一 夜 成 名 。 在 本 章 中 ， 我 们 将 学 习 下 列 主题 : 


口 浏览 器 和 Node.js 的 异步 事件 模型 
口 回调 函数 

口 计时 器 

口 EventEmitter 

口 模块 和 npm 













































































JavaScript 的 性 能 、 功 用 以 及 流行 程度 使 得 











9.1 浏览 器 的 异步 事件 模型 
在 学 习 Node 之 前 ， 让 我 们 先 来 理解 运行 在 浏览 器 中 的 JavaScript。 


Node 依 赖 于 事件 驱动 以 及 异步 平台 来 实现 服务 器 端的 JavaScript。 这 与 浏览 器 处 理 JavaScript 
的 方式 很 相似 。 浏 览 器 和 Node 在 进行 WO 的 时 候 ， 采 用 的 都 是 事件 驱动 及 非 阻塞 的 方式 。 


要 想 深入 理解 Node.js 的 事件 驱动 及 异步 特性 ， 首 先 要 比较 一 下 各 种 操作 及 其 成 本 : 
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L1 缓 冲 读 操作 0.5 纳 秒 

L2 缓 冲 读 操作 7 纳 秒 

内 存 100 纳 秒 

4KB SSD 随 机 读 操 作 150 000 纳 秒 
1MB SSD 顺 序 读 操作 1 000 000 纳 秒 
1MB 磁盘 顺序 读 操 作 20 000 000 纳 秒 


这 些 数据 取 自 https:/gist.github.conyjboner/2841832 ， 显 示 出 了 输入 /输出 (IO ) 操作 的 高 昂 
成 本 。 计 算 机 程序 耗 时 最 长 的 操作 就 是 IO 操作 ， 如 果 程 序 总 是 在 等 待 这 些 操作 完成 ， 则 整个 程 
序 的 执行 速度 都 会 被 拖 慢 。 让 我 们 来 看 一 个 这 样 的 例子 : 

console.1og("1") ; 


var log = fileSystemReader.read("./verybigfile.txt"); 
console.10g("2"); 


fileSsystemReader .read() 在 调用 时 会 从 文件 系统 中 读 取 文件 。 正 如 我 们 刚刚 看 到 的 , 这 
里 的 瓶颈 是 IO ， 在 读 取 操作 结束 之 前 要 花费 很 长 的 时 间 完 成 相关 的 操作 。 取 决 于 硬件 种 类 、 文 
件 系统 、 操 作 系 统 等 因素 ,整个 程序 的 执行 会 被 这 个 操作 阻塞 一 段 不 短 的 时 间 。 上 面 的 代码 执行 了 
一 些 会 阻塞 的 TO 操作 一 一 进程 会 一 直 阻 塞 到 IO 结束 并 有 数据 返回 。 这 就 是 大 多 数 人 所 熟悉 的 传统 
IO 模型 。 这 种 模型 不 但 成 本 高 ， 而 且 会 造成 可 怕 的 时 延 。 每 个 进程 都 有 相关 的 内 存 和 状态 一 一 
它们 都 会 被 阻塞 ， 直 到 IO 结 


如 果 程 序 阻塞 在 TO 上 ，Node 服 务 器 会 拒绝 新 的 请 求 。 有 几 种 方法 可 以 解决 这 个 问题 。 最 流 
行 的 传统 方法 就 是 利用 多 个 线程 来 处 理 请 求 ， 这 叫 作 多 线程 技术 。 如 果 你 熟悉 Java， 那 应 该 写 过 
多 线程 代码 。 不 同 的 语言 对 于 线程 的 支持 方式 也 不 同一 一 就 本 质 而 言 , 线程 拥有 自己 的 内 存 和 状 
态 。 编 写 大 规模 的 多 线程 应 用 并 非 易 事 。 当 多 个 线程 访问 一 个 共享 内 存 或 值 的 时 候 , 在 线程 间 维 
护 正 确 的 状态 是 一 件 非 常 困 难 的 事 。 在 内 存 和 CPU 使 用 率 方面 ,线程 的 成 本 也 不 低 。 用 于 同步 资 
源 的 线程 最 终 也 可 能 会 被 阻塞 。 


浏览 器 对 此 的 处 理 方式 有 所 不 同 。 浏 览 器 中 的 IO 发 生 在 主 执行 线程 之 外 ， 当 IO 结束 时 会 触 
发 一 个 事件 。 该 事件 会 由 与 之 关联 的 回调 函数 来 处 理 。 这 种 类 型 的 MO 是 非 阻塞 和 异步 的 。 因 为 IO 
并 不 会 阻塞 主 执行 线程 ， 所 以 浏览 器 可 以 继续 处 理 出 现 的 其 他 事件 ， 无 需 等 待 任何 IO。 这 是 一 
种 非常 有 力 的 概念 。 异 步 JO 使 得 浏览 器 能 够 响应 多 个 事件 ， 人 允许 更 高 层次 的 交互 活动 。 


Node 采 用 了 类 似 的 异步 处 理 方式 。Node 的 事件 循环 作为 一 个 单独 的 线程 运行 。 这 意味 着 你 
所 编写 的 应 用 实际 上 是 单线 程 的 ， 但 这 并 不 表示 Node 本 身 是 单线 程 。Node 使 用 了 libuv， 是 多 线 
程 的 一 一 好 在 这 些 细节 都 隐藏 在 Node 内 部 了 ， 在 开发 应 用 的 时 候 不 需要 知道 这 些 。 

每 一 个 涉及 IO 的 调用 都 需要 注册 一 个 回调 函数 。 注 册 回 调 函 数 的 过 程 同样 是 异步 的 ， 立 刻 
就 能 够 返回 。1/O 操 作 一 结束 ， 对 应 的 回调 函数 就 被 推 和 事件 循环 中 。 它 会 在 之 前 被 推 入 事件 循 
环 的 所 有 其 他 回调 函数 执行 时 执行 。 所 有 的 操作 都 是 线程 安全 的 , 这 主要 是 因为 在 事件 循环 中 没 
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有 需要 进行 同步 的 并 行 执行 路 径 。 
从 根本 上 来 说 , 只 有 一 个 线程 在 运行 你 的 代码 , 不 存在 并 行 执行 ; 但 除 此 之 外 的 都 是 并 行 的 。 








Node.js 依 赖 于 libev( http://software.schmorp.de/pkg/libev.html ) 提供 事件 循环 ， 由 libeio 


( http://software.schmorp.de/pkg/libeio.html ) 使 用 线程 池 来 提供 异步 WO 支持 。 要 了 解 更 多 的 相关 内 
容 ， 可 以 查阅 libev 的 文档 : http://pod .tst.eu/http://cvs.schmorp.de/libev/ev.pod。 


下 面 是 一 个 Node.js 中 异步 代码 执行 的 例子 : 


var fs = require('fs'); 
console.1og('1'); 





fs.readFile('./response.json', function (error, data) { 
if(!error)t{ 


console.log(data); 
1 


console.10g('2'); 


在 这 个 程序 中 ， 我 们 从 磁盘 读 取 r*esponse. json 文 件 。 当 磁盘 IO 结束 后 会 执行 指定 的 回调 
函数 ， ee 你 会 在 控制 台中 看 到 
console.1logl( ' ) 的 输出 内 容 紧 随 着 console . logl( ' ) 的 输出 : 





事件 循环 







1. 发 出 WO 请 求 ， 例 如 














”从 URL 中 下 载 资源 
，5. 接收 响应 并 
调用 回调 函数 
S 颈 
lib.getResource( “http://yourserver/config” ,fonction(err ,doto){ 
,ryt A 和 .上 2 发 出 MO 请 求 ， 例 
a 如 从 URL 中 下 载 资源 
lib,getAnotherResource( httpIA/Yyourserverynewconfig ，functionCerr ,dotao)f 
doSonethingEl seWith(data); . 
D; gy 6. 接收 响应 并 
“ “名 ...…*” 调 用 回调 函数 
\ 4 触发 另 一 次 IO se 


3. 触 发 另 一 个 事件 








Node.js 不 需要 任何 额外 的 服务 器 组 件 ， 因 为 它 会 创建 自己 的 服务 需 进 程 。 一 个 Node 应 用 实 
际 上 就 是 在 指派 接口 上 运行 的 一 个 服务 器 。 在 Node 中 ， 服 务 器 和 应 用 是 相同 的 。 
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这 里 有 一 个 Node.js 服 务 器 的 例子 ， 当 在 浏览 器 中 输入 http:/localhost3000/ 时 ， 它 会 使 用 字符 
串 Hello Node 作 为 响应 : 
Var http = require('http'); 
Var server = http.createServer () ; 
server.on('request', function (req, res) { 
res.writeHead(200, {'Content-Type': 'text/plain'}); 
res.end('Hello Node\n'); 
上 了 
server.listen(3000); 
在 本 例 中 ， 我 们 使 用 了 http 模 块 。 回 忆 一 下 我 们 之 前 关于 JavaScript 模 块 的 讨论 ， 你 会 发 现 
这 正 是 CommonJS 模 块 的 实现 。Node 将 多 个 模块 编译 成 二 进 制 形式 。 核心 模块 定义 在 Node 的 源 代 
码 中 。 这 些 模块 位 于 lib/ 目 录 中 。 


如 果 模 块 名 被 传人 require()，, 会 首先 载 和 指定 的 模块 。 例 如 ，require('http') 会 载 人 
内 置 的 HTTP 模 块 ， 即使 有 其 他 文件 也 使 用 这 文 个 名 字 。 


| 我 们 创建 了 一 个 server 对 象 ， 并 使 用 server .on () 
方法 来 侦 听 *equest 事 件 。 只 要 有 请 求 到 达 端 口 3000 ， 就 会 调用 相应 的 回调 函数 。 回 调 函 数 使 
用 request 和 respons 作为 参数 。 另外 ， 在 回 送 响应 信息 之 前 ， 我 们 设置 了 content -type 头 
部 和 HTTP 响 应 代码 。 你 可 以 把 上 面 的 代码 复制 下 来 ,保存 成 纯 文本 文件 并 命名 为 app.js， 然 后 使 
用 Node.js 在 命令 行 中 运行 这 个 服务 器 : 









































$ >> node app.js 


服务 器 启动 之 后 ， 可 以 在 浏览 器 的 地 址 栏 中 输入 http://localhost:3000， 然 后 就 可 以 看 到 下 面 
这 行 平淡 无 奇 的 文本 了 了: 





© CC || localhost:3000 ] 








Hello Node ] 





如 果 想 查看 内 部 细节 ， 可 以 使 用 cur1 命 令 


> curl -V http://localhost:3000 
Rebuilt URL to: http://localhost:3000/ 
Try Lng. S31 
Connected to localhost (::1) port 3000 (#0) 
GET / HTTP/1.1 
Host: localhost:3000 
User-Agent: curl/7.43.0 
Accept: */* 


人 人 VV VV VV * * * 1 


HTTP/1.1 200 OK 
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< Content-Type: text/plain 
< Date: Thu, 12 Nov 2015 05:31:4 
< Connection: keep-alive 
< Transfer-Encoding: chunked 
< 
Hello Node 
* Connection #0 to host localhos 


cur1 会 使 用 表示 请 求 ( > ) 和 响应 ( 


9.2 ”回调 函数 
JavaScript 中 的 回调 函数 不 容易 上 手 ， 



































由 于 Node 中 的 一 切 都 是 异步 的 ， 所 以 你 ; 











目 中 最 重要 的 部 分 是 代码 组 织 与 模块 管理 。 








4 GMT 


t left intact 


< ) 的 指示 符 显示 出 对 应 的 请 求 头 部 和 响应 头 部 信息 。 








通常 需要 一 些 时 间 来 适应 , 如果 你 之 前 从 事 的 是 非 异步 





编程 , 那 需要 仔细 地 学 习 并 理解 回调 函数 的 工作 原理 ,你 可 能 会 发 现 自己 好 像 第 一 次 学 编程 一 样 。 





各 使 用 回调 函数 ， 而 不 需要 仔细 地 构造 它们 。Node.js 项 























回调 函数 是 随后 以 异步 形式 执行 的 函数 。 异步 程序 并 不 是 从 上 到 下 顺序 执行 , 它 会 根据 某 些 


hl 





lB 件 ( 如 HTTP 请 求 或 文件 系统 读 取 操 作 








) 出 现 的 顺序 和 速度 ， 在 不 同 的 时 间 执 行 不 同 的 函数 。 



































一 个 函数 究竟 是 顺序 执行 还 是 异步 执行 ， 依 赖 于 它 执行 时 所 处 的 上 下 文 : 


var i=0; 

function adqd (num){ 
console.1log(i); 
i=i+num; 

} 

add (100); 

console.1log(i); 





如 果 使 用 Node 运 行 这 个 程序 ， 你 会 看 到 下 列 输出 假设 文件 名 是 app.js ): 


~/Chapter9 > node app.js 
0 
100 

















这 是 我 们 习惯 看 到 的 结果 。 传统 的 同步 代码 在 执行 时 是 逐 行 顺序 执行 的 。 上 面 的 代码 中 定义 











了 一 个 函数 ， 然 后 接着 在 下 一 行 调用 该 函数 ， 不 做 任何 等 待 。 这 就 是 顺序 控制 流程 。 

要 是 在 顺序 执行 序列 中 引入 了 VO， 情 况 会 有 所 不 同 。 如 果 我 们 尝试 从 文件 中 读 取 内 容 或 者 
调用 远程 端点 (remote endpoint )，Node 会 采用 异步 方式 执行 这 些 操作 。 下 例 中 ， 我 们 要 使 用 一 
个 叫 作 request 的 Node.js 模 块 。 该 模块 用 来 发 起 HTTP 调 用 ， 安 装 方法 如 下 : 








npm install request 


我 们 在 本 章 随 后 部 分 将 讨论 npm 的 用 法 。 考 虑 下 面 的 例子 : 
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Var request = require('request'); 
var status = undefined; 
request ('http://google.com', function (error, response, body) { 
if (!error && response.statusCode == 200) { 
status_code = response.statusCode; 
} 
I 
console.log(status); 
在 执行 这 段 代码 时 ， 你 会 发 现 变 量 status 的 值 依然 是 ungdefined。 在 本 例 中 ， 我 们 发 起 了 
一 个 HTTP 调 用 一 一 这 属于 VO 操作 。 当 进行 WO 操作 时 , 执行 过 程 就 变 成 异步 了 。 在 前 面 的 例子 中 ， 
所 有 的 操作 都 在 内 存 中 ， 不 涉及 WO， 因 此 执行 过 程 是 同步 的 。 当 我 们 运行 这 个 程序 时 ， 所 有 的 
函数 立刻 被 定义 ,但 并 不 是 马上 就 执行 。 调 用 request () 函数 后 ,继续 执行 下 一 行 代 码 。 如 果 没 
有 可 执行 的 内 容 ，Node 要 么 等 待 /O 结 束 ， 要 么 退出 。 当 request ( ) 函数 完成 其 任务 之 后 ， 会 接 
着 执行 回调 函数 ( 作为 request () 函数 第 二 个 参数 的 那个 匿名 函数 )。 上 面 的 例子 中 出 现 
undefineg 的 原因 在 于 ， 代 码 中 没有 对 应 的 逻辑 告诉 console .1og () 语 句 应 该 等 到 request () 
函数 结束 之 后 再 从 HTTP 调 用 中 获取 响应 信息 。 


回调 函数 并 不 会 立刻 执行 ， 这 改变 了 代码 的 组 织 方式 。 可 以 按照 下 面 的 方式 重新 组 织 代码 : 


口 将 异步 代码 放 入 函数 
口 将 回调 函数 传 给 包 庄 函数 ( wrapper function ) 


我 们 遵照 上 面 两 个 要 点 重新 组 织 之 前 的 例子 。 来 看 修改 后 的 代码 : 













































































Var request = require('request'); 
var status = undefined; 
function getSiteStatus (callback)t{ 
request('http://google.com', function (error, response, body) { 
if (!error && response.statusCode == 200) { 
status_code = response.statusCode; 
} 
callback (status._code); 
地 
} 
function showStatusCode(status){ 
console.log(status); 
} 
getSiteStatus (showStatusCode); 


运行 后 会 得 到 如 下 (正确 的 ) 输出 : 





snode app.js 
200 


我 们 将 异步 代码 封装 到 了 卫 数 getsitestatus () 中 ， 把 名 为 callback() 的 函数 作为 参数 


传人 人， 并 在 getsitestatus() 的 最 后 一 行 执行 该 隐 数 。 回 调 函 数 showStatuscode() 只 是 简单 
地 包 于 了 之 前 调用 的 console.1og()。 然 而 ,不 同 之 处 在 于 异步 执行 的 方式 。 在 学 习 如 何 使 用 
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回调 函数 编程 时 ， 最 重要 的 一 点 就 是 要 明白 函数 是 头等 对 象 ( first-class object )， 可 以 保存 在 变量 
中 ， 也 可 以 作为 参数 传递 。 为 变量 起 一 个 简单 且 富 有 描述 性 的 名 字 对 于 代码 的 可 读 性 非常 重要 。 
现在 , 一旦 HTTP 调 用 完成 ， 回 调 函 数 就 会 被 调用 ， 变 量 status_code 中 就 会 得 到 正确 的 值 。 在 
有 些 实际 情况 中 ， 你 希望 某 个 异步 任务 仅 在 其 他 异步 任务 完成 之 后 才 执 行 。 考 虑 下 面 的 情形 : 











http.createServer (function (req, res) { 
getURL(url, function (err, res) { 
getURLContent (res.data, functionl(err,res) { 


2 | 
}); 
可 以 看 到 , 我 们 将 一 个 异步 函数 向 套 到 了 另 一 个 异步 函数 中 。 这 种 髓 套 形式 会 导致 代码 难以 
阅读 和 管理 。 这 样 的 回调 方式 有 时 被 称 为 回调 函数 地 狱 ( callback hell )。 为 了 避免 这 种 情况 ， 如 
果 你 有 一 些 代码 必须 等 待 其 他 异步 代码 结束 , 可 以 通过 将 代码 放 入 函数 , 再 将 其 作为 回调 函数 传 
递 ， 以 此 传达 出 相互 之 间 的 依赖 性 。 另 一 个 要 点 是 为 函数 起 个 名 字 ， 而 不 是 依赖 使 用 匿名 晒 数 作 
为 回调 函数 。 我 们 可 以 对 前 面 的 示例 进行 重 构 ， 使 其 更 有 可 读 性 ， 如 下 所 示 :: 



























































Var urlContentProcessor = function(data)t{ 


} 
Var urlResponseProcessor = function(data)t{ 
getURLContent (data,urlContentProcessor); 


} 

Var createServer = function(regqg,res)t 

getURL(url,urlResponseProcessor); 

2 

http.createServer (createServer); 

这 上 段 代 码 中 体现 了 两 个 重要 的 概念 。 首先 , 我 们 使 用 了 命名 函数 并 将 其 作为 回调 函数 。 其 次 ， 
没有 出 现 异 步 函 数 艇 套 。 如 果 在 内 部 函数 中 需要 访问 闭 包 变量 , 则 需要 略 作 修改 。 在 这 个 例子 中 ， 
行内 匿名 函数 是 一 种 更 好 的 选择 。 

在 Node 中 会 经 常用 到 回调 函数 。 它们 更 适合 于 定义 那些 一 次 性 响应 的 处 理 逻 辑 。 如果 需 要 响 
应 重复 性 事件 ，Node 还 提供 了 其 他 机 制 。 在 进一步 深入 之 前 ， 我 们 需要 理解 Node 中 的 计时 器 功 
能 以 及 事件 。 




















9.3 ”计时 器 


计时 需 用 于 在 一 定 延 迟 之 后 调度 执行 特定 的 回调 函数 。 设 置 这 种 延迟 执行 的 主要 方法 有 两 
种 : setTimeout 和 setInterval。setTimeout () 困 数 用 于 延迟 之 后 调度 执行 回调 函数 ， 而 
setIntetrval 用 来 重复 地 调度 执行 回调 函数 .setTimeonut () 函数 对 于 需要 定时 执行 的 任务 非常 
有 用 ， 比 如 说 整理 工作 。 考 虑 下 面 的 例子 : 
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setTimeout (function() { 
console.log("This is just one time delay"); 
}3.0.00s 
var count = 0; 
Var 七 = setIinterval (function() { 
Count++; 


console.log(count); 
if (count> 5){ 
clearIinteval (t); 
} 
}, 2000,. )3 
首先 ， 我们 使 用 setTimeout () 安排 在 1000 毫 秒 之 后 执行 一 个 回调 函数 ( 匿名 函数 )。 这 个 
回调 函数 只 调度 执行 一 次 。 我 们 使 用 set Interval () 来 安排 重复 执行 另 一 个 回调 函数 。 注 意 ， 
setInterval () 的 返回 值 被 赋 给 了 变量 t 可 以 在 clearInterval () 中 使 用 该 引用 来 清除 此 
次 调度 活动 。 




















9.4 EventEmitter 


我 们 之 前 讨论 过 ,回调 函数 非常 适合 执行 一 次 性 逻辑 处 理 ( one-offlogic )。EventEmitter 在 响 
应 重复 事件 方面 非常 有 用 。EventEmitter 可 以 触发 事件 ， 也 能 够 处 理 这 些 被 触发 的 事件 。 有 些 重 
要 的 Node API 就 是 基于 EventEmitter 构 建 的 。 


由 EventEmitter 生 成 的 事件 是 通过 侦 听 器 处 理 的 。 侦 听 咒 是 一 个 与 事件 相关 联 的 回调 函数 一 一 
当 事 件 发 生 时 ， 相 关 的 侦 听 需 也 会 被 触发 。event .EventEmitter 是 一 个 类 ， 用 于 为 发 射 ( 触 
发 ) 事件 和 绑 定 回调 函数 提供 一 致 的 接口 。 


按照 惯例 ， 事 件 名 采用 驼峰 命名 法 ; 不 过 ， 任 何 有 效 的 字符 串 都 可 以 用 作 事 件 名 称 。 




















使 用 redquire('events ') 来 访问 EventEmitter 类 : 








Var EventEmitter = require('events'); 


如 果 EventEmitter 实 例 发 生 错误 ， 会 引发 srror 事 件 。 在 Nodejs 中 ，error 事 件 被 视 为 一 种 特 
殊 情 况 。 如 果 不 进 行 处 理 的 话 ， 程 序 会 携带 异常 栈 ( exception stack ) 退出 。 


如 果 添 加 或 删除 了 侦 听 器 , EventEmitter 会 分 别 引 发 出 newListener 事 件 或 removeListener 
事件 。 


为 了 理解 EventEmitter 的 用 法 ,我们 编写 了 一 个 简单 的 telInet 服 务 器 ， 不 同 的 客户 端 都 可 以 登 
录 并 输入 一 些 命令 。 服 务 器 会 根据 不 同 的 命令 作出 相应 的 响应 : 





Var _net = require('net'); 
Var _events = require ('events'); 
Var _emitter = new events.EventEmitter(); 
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_emitter.on('join', function(id,caller)t{ 
console.log(id+" - joined"); 
3 池 


_emitter.on('gquit', function(id,caller)t 


console.log(id+" - left"); 
上} 
Var _server = _net.createServer (function(caller) { 
Var process_id = caller.remoteAddress + ':' + Caller.remotePort; 
_emitter.emit ('join',id,caller); 
caller.on('end', function() { 


console.log("disconnected"); 
_emitter.emit ('gquit',id,caller); 
9 
学 
_server.listen(8124); 
这 上段 代码 中 使 用 了 Node 的 net 模 块 。 我 们 想 做 的 是 创建 一 个 服务 器 ， 让 客户 端 可 以 通过 标准 
的 telnet 命 令 进行 连接 。 当 客户 端 成 功 连接 后 ， 服 务 器 会 显示 出 客户 端的 地 址 和 端口 号 ; 当 客 
户 端 退出 时 ， 服 务 器 会 将 同样 的 信息 记录 到 日 志 中 。 


客户 端 连 接 时 会 引发 join 事件 ， 在 断 开 时 会 引发 suit 事 件 。 我 们 为 这 两 个 事件 都 设置 了 侦 
听 顺 ， 这 些 侦 听 器 会 在 服务 器 端 记 录 下 相应 的 信息 。 


启动 这 个 程序 ， 使 用 telent 连 接 到 服务 器 : 
telnet 127.0.0.1 8124 


在 服务 器 控制 台中 ， 你 会 看 到 服务 器 已 经 记录 下 已 连接 的 客户 端 ; 
































> node app.js 
ffff:127 :0% 0 T51000 jolied 
ffff:127;30,0., 1:51001 = joined 


如 果 有 客户 端 退出 会 话 ， 也 会 出 现 相应 的 信息 。 
9.5 “模块 
当 你 编写 了 大 量 代 码 之 后 , 接 下 来 要 考虑 的 就 是 如 何 组 织 代码 。Node 采 用 的 是 我 们 之 前 在 讲 


模块 模式 时 讨论 过 的 CommonJS 模 块 。Node 模 块 可 以 发 布 到 Node 包 管理 器 ( Node Package 
Manager，npm ) 仓库 中 。npm 仓 库 是 一 个 在 线 的 Node 模 块 合集 。 











创建 模块 


Node 模 块 可 以 是 单个 文件 , 也 可 以 是 包含 一 个 或 多 个 文件 的 目录 。 通常 最 好 是 创建 一 个 单独 
的 模块 目录 。 模 块 目录 中 的 文件 一 般 都 命名 为 index.js。 模 块 目录 的 结构 如 下 所 示 : 
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node_project/src/nav 
--- >index.js 


在 项 目 目录 中 ， 模 块 目录 nav 包 含 了 模块 代码 。 通 常 ， 模 块 代码 需要 放 在 indexjs 文 件 中 一 一 
你 也 可 以 将 其 修改 成 其 他 文件 。 考 虑 下 面 这 个 名 为 geo .js 的 简单 模块 : 


exports.area = function (r) { 
下 问世 让 下 和 人 于 下 区 

jn 

exports.circumference = function (r) { 
he: 

he 


你 可 以 通过 exports 导 出 这 两 个 函数 。 使 用 这 个 模块 时 需要 用 到 require() 函数 , 这 个 函数 
接受 模块 名 或 是 指向 模块 代码 的 系统 路 径 。 可 以 像 下 面 这 样 使 用 该 模块 : 

















var geo = require('./geo.js'); 
console.log(geo.area(2)); 


因为 我 们 只 向 外 部 导出 了 两 个 函数 , 所 以 模块 中 其 余 的 部 分 仍旧 是 私有 状态 。 回 想 一 下 曾经 
讲解 过 的 模块 模式 一 Node 使 用 的 就 是 CommonJS 模 块 。 还 有 另外 一 种 创建 模块 的 语法 。 你 可 以 
使 用 modules .Export s 来 导出 模块 ,实际 上 ,exports 只 是 modules .expo rts 的 一 个 辅助 工具 。 
在 使 用 exports 时 , 它 会 将 模块 导出 的 属性 赋 给 modqules .exports。 但 如 果 modules .exports 
已 经 有 了 这 些 属 性 ， 就 会 将 其 忽略 。 

为 了 返回 一 个 Geo-` 构 造 函 数 ， 而 非 包含 函数 的 对 象 ， 需 要 重 写 先 前 创建 的 geo 模 块 。 重 写 后 
的 geo 模 块 及 其 用 法 如 下 : 


Var Geo = function(PI) { 
this.PI = PI; 



















































































} 

Geo.prototype.area = function (r) { 
return this.PI * Yr * r; 

过 

Geo .prototype.circumference = function (r) { 
return this.PI * this.PI * r; 

}; 


module.exports = Geo; 


考虑 一 个 config .js 模块 : 





var db_config = { 
server: "0.0.0.0", 
BOrts. T3306 
user: "mysql", 
password: "mysql" 
}; 


module.exports = db_config; 


如 果 你 想 从 模块 外 部 访问 ab_config， 可 以 使 用 recuire() 来 包含 该 模块 ， 然后 像 下 面 这 
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样 引用 对 象 : 


var config = require('./config.js'); 
console.log(config.user); 


组 织 模块 的 方式 有 三 种 。 


口 使 用 相对 路 径 ， 例 如 : config = require('./lib/config.js') 
口 使 用 绝对 路 径 ， 例 如 : config = require('/nodeproject/lib/config.js') 
口 搜索 模块 ， 例 如 : config = require('config') 


前 两 种 方式 不 言 而 喻 一 一 让 Node 在 文件 系统 的 特定 位 置 查找 模块 。 

如 果 你 选择 第 三 种 方式 , 也 就 是 要 求 Node 使 用 标准 查找 方法 来 定位 模块 。 为 了 定位 到 指定 的 
模块 ，Node 从 当前 目录 开始 ,在 其 后 加 上 .mode modules/， 然 后 尝试 从 这 个 位 置 载 入 模块。 如 果 
模块 没有 找到 ， 那 就 从 父 目 录 开 始 再 查找 ， 直 至 文件 系统 的 根 目录 。 


举例 来 说 ， 如 果 在 /projects/mnode/ 中 调用 require('config')，, 会 搜索 以 下 位 置 ， 直 至 找到 
匹配 项 为 上 上 : 



































口 /projects/node /node modules/config.js 


DD /projects/node modules/config.js 





口 /node modules/config.js 


对 于 从 npm 下 载 的 模块 , 使 用 这 种 方法 要 相对 简单 。 正 如 之 前 讲 过 的 ， 只 要 为 Node 提 供 一 个 
入 口 点 ， 就 可 以 在 目录 中 组 织 模块 了 。 


最 简单 的 方法 就 是 创建 一 个 .node modules/supermodule/ 目 录 ， 在 其 中 放 人 index.js 文 件 。 该 
文件 在 默认 情况 下 会 被 载 人 。 还 有 一 种 方法 ,你 可 以 在 mymodulename 目 录 下 放置 一 个 package.json 
文件 ， 在 其 中 指定 模块 名 及 其 主 文件 名 : 

{ 

"name": "supermodule", 


"imal wDLACONnfig:je" 


} 


你 得 知道 的 是 Node 会 像 缓存 对 象 那 样 缓存 模块 。 如 果 你 有 两 个 (或 多 个 ) 文 件 需 要 某 个 模块 ， 
第 一 个 require 会 将 该 模块 缓存 到 内 存 中 ， 这 样 第 二 个 require 就 不 必 重 新 载 人 模块 源 代码 了 。 
但 如 果 需 要 的 话 , 后 一 个 reauire 可 以 修改 模块 的 功能 。 这 通常 叫 作 猴子 补丁 monkey patching )， 
可 以 在 不 需要 修改 原始 模块 的 情况 下 改变 模块 的 行为 。 
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9.6 npm 











npm 是 Node 用 于 发 布 模块 的 包 管 理 器 。npm 可 以 用 于 安装 、 更 新 及 管理 模块 。 包 管理 器 在 
Python 等 其 他 语言 中 也 很 流行 。npm 能 够 自动 解决 和 更 新 包 的 依赖 关系 ， 从 而 减轻 你 的 负担 。 


安装 包 

安装 npm 包 的 方法 有 两 种 : 局 部 安装 和 全 局 安装 。 如 果 只 想 在 特定 的 Node 项 目 中 使 用 某 个 模 
块 的 功能 ， 你 可 以 针对 该 项 目 进行 局 部 安装 ， 这 是 npm install 的 默认 行为 。 另 外 ， 有 一 些 模 
块 可 以 用 作 命 令 行 工 具 ; 在 这 种 情况 下 ， 可 以 选择 全 局 安装 : 

npm install request 

npm 的 install 指 令 能 够 安装 特定 的 模块 一 一 在 本 例 中 是 request 模 块 。 要 确认 npm 
install 是 否 执 行 顺利 , 可 以 查看 node modules 目 录 是 否 存在 , 并 检查 是 否 包含 所 安装 包 的 目录 。 

当 把 模块 添加 到 项 目 中 之 后 ， 管 理 每 个 模块 的 版 本 /依赖 性 就 变 得 非常 困难 。 对 于 以 局 部 形 
式 安装 的 包 ， 最 佳 管理 方法 是 在 项 目 中 创建 package.json 文 件 。 


packagejson 文 件 有 下 列 好 处 。 


口 定义 待 安装 的 每 个 模块 的 版 本 。 有 时 候 ， 你 的 项 目 要 依赖 于 某 个 模块 的 特定 版 本 。 在 这 
种 情况 下 ，package.json 能 够 帮助 你 下 载 并 维护 正确 的 版 本 依赖 关系 。 

口 作为 项 目 中 所 用 到 的 全 部 模块 的 文档 。 

口 在 部 团 和 打包 应 用 程序 时 无 需 担 心 部 署 代码 时 的 依赖 管理 。 


可 以 使 用 以 下 命令 创建 packagejson 文 件 : 
















































































npm init 
在 回答 有 关 项 目的 基本 问题 之 后 ， 一 个 空白 的 package.json 文 件 就 创建 好 了 ， 内 容 如 下 : 


{ 
"name": "chapter9", 
站 全 站 本 站 和 Sar.., 
"description": "chapter9 sample project", 
"main": "app.js" 
"dependencies": { 
"request": "^2.65.0" 





} 
"devDependencies": {}, 
deh an do i 
"test": "echo \"Error: no test specified\" && exit 1" 
} 
"keywords": |[ 
"Chapter9", 
"sample", 
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"project" 
] 
"author": "Ved Antani", 
"license": "MIT" 


} 
你 可 以 在 文本 编辑 器 中 手动 编辑 这 个 文件 。 该 文件 中 一 个 重要 的 部 分 就 是 aependqencies 标 
签 。 要 想 指定 项 目 所 依赖 的 包 ， 需 要 将 其 在 package.json 文 件 中 列 出 。 这 些 包 的 类 型 有 两 种 。 
口 dependencies: 在 生产 环境 中 所 需要 的 包 。 
口 devDependencies: 仅 用 于 开发 和 测试 环境 的 包 ( 例如 使 用 Jasmine node package )。 
在 前 面 的 例子 中 ， 你 可 以 看 到 以 下 依赖 关系 : 


"dependencies": { 
"Tedqlest "2 65.0" 
}, 


这 表示 该 项 目 依 赖 requset 模 块 。 









































模块 的 版 本 依赖 于 语义 化 的 版 本 规则 : https://docs.npmjs.com/getting-started/ 


semantic-versioning。 





package.json 文 件 准备 好 之 后 ， 就 可 以 使 用 npm instal1 命 令 为 项 目 自动 安装 模块 了 。 


有 一 个 很 酷 的 技巧 ， 我 个 人 爱不释手 。 在 从 命令 行 安装 模块 时 ， 可 以 使 用 --save 选 项 将 该 
模块 的 依赖 关系 自动 添加 到 package.json 文 件 中 : 

npm install async --save 

npm WARN package.json chapter9@1.0.0 No repository field. 


npm WARN package.json chapter9@1.0.0 No README data 
async@1 .5.0 node_ modules/async 


在 上 面 的 命令 中 ,我 们 使 用 带 有 --save 选 项 的 npm 命 令 安 装 了 async 模 块 。 在 package.json 
文件 中 会 自动 创建 相应 的 条 目 : 








"dependencies": { 
naeynor ee ve 0, 
"request": "^2.65.0" 


}, 


9.7 JavaScript 性 能 


与 其 他 语言 一 样 , 编写 大 规模 JavaScript 代 码 时 保证 正确 性 是 必 不 可 少 的 。 随 着 这 门 语言 的 日 
益 成 熟 , 有 些 先天 的 问题 需要 和 留意。 一些 表现 不 几 的 库 在 编写 高 质量 代码 方面 做 出 了 贡献 。 对 于 
大 多 数 重大 系统 而 言 ， 良 好 的 代码 = 正确 的 代码 + 高 性 能 的 代码 。 新 一 代 软 件 系统 非常 强调 性 
能 。 在 本 节 中 ,我们 将 讨论 一 些 可 以 用 来 分 析 JavaScript 代 码 并 理解 其 性 能 标准 的 工具 。 
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我 们 接 下 来 会 讲 到 两 个 概念 。 


码 中 可 优化 的 部 分 。 





JavaScript 性 能 分 析 
JavaScript 性 能 分 析 对 于 理解 代码 中 不 同 部 分 的 尾 





口 网 络 性 能 : 检查 如 图 片 、 样 式 表单 、 脚 本 等 网 络 资源 的 载 人 。 











各 式 各 样 的 分 析 工 具 可 供 你 理解 代码 的 性 能 标准 。 
1. CPU 分 析 


口 性 能 分 析 ( profiling ): 在 脚本 分 析 过 程 中 对 各 种 函数 和 操作 进行 计时 ， 有 助 于 鉴别 出 代 


FE 能 非常 重要 ,你 可 以 观察 函数 和 操作 的 用 时 
情况 ， 了 解 哪些 操作 花费 的 时 间 较 长 。 有 了 这 些 信 息 ， 你 就 可 以 优化 那些 耗 时 函数 的 性 能 ， 调 校 
代码 的 整体 性 能 。 我 们 将 把 注意 力 放 在 Chrome 的 Developer Tools 提 供 的 性 能 分 析 选 项 上 ， 其 中 有 


CPU 分 析 会 显示 出 代码 中 各 部 分 所 耗费 的 执行 时 间 。 我们 必须 提醒 DevTools 记 录 CPU 分 析 数 





据 0 来 上 手 一 试 吧 Oo 
在 DevTools 中 启用 CPU 分 析 器 的 方法 如 下 。 


(1) 打开 Chrome DevTools 的 Profiles 面 板 。 
(2) 检查 Collect JavaScript CPU Profile 是 否 选 中 : 























S Workforthebest startups 
Q 上 日 Elements Network Sources Timeline | Prof 


@ OO 


@) Collect JavaSc 
CPU profiles s 


) Take Heap Sn 


Record javaSc 


Start 





Select profiing ype 


Heap snapshot profiles show memory distribution a 


Record Heap Allocations 


iles| Resources Audits Console 


ript CPU Profile 
how where the execution time is speni 


apshot 


ript object allocations over time. Use t 


Load 








在 本 章 中 ， 我 们 将 使 用 Google 的 基准 测试 (benchmark ) 页 面 : http://octanebenchmark. 
googlecode.com/svn/latest/index.html"。 我 们 使 用 它 ， 是 因为 它 包 含 了 一 些 示例 功能 ， 我 们 可 以 从 




















Qa 在 翻译 本 书 之 时 ,该 页 面 已 无 法 访问 。 具 体 的 页 面 地 址 ， 读 者 可 自行 以 V8 Benchmark Suite 为 关键 字 搜 索 。 
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中 观察 到 各 种 性 能 瓶 贷 和 基准 。 要 开始 记录 CPU 分 析 , 需要 在 Chrome 中 打开 DevTools, 在 Profiles 
标签 下 单 击 Start 按 钮 或 按 Cmd/CtrI+E。 刷 新 V8 Benchmark Suite 页 面 。 当 该 页 面 完 全 重新 加 载 之 
后 , 将 显示 基准 测试 成 绩 。 返回 到 Profiles 面 板 , 单 击 Stop 按 钮 停止 记录 , 或 是 再 次 按 Cmd/Ctrl+E。 


已 记录 下 的 CPU 分 析 数 据 以 自 下 而 上 的 方式 显示 出 了 各 项 功能 的 执行 时 间 ， 如 下 图 所 示 : 

















Q 中 Elements Network Sources Timeline | Profiles| Resources Audits Console 


@ 9 Heavy (Bottom Up)v © x 上 
Self 了 Total Function 

6923.0 ms | 6923.0 ms | dle 

CPU PROFILES 2381.5ms 7 2381.5ms 7.09%|lin_solve 
2380.5 ms 2380.5ms 7.09% 了 project 

Profile 1 以 浊 2380.5 ms 2380.5ms 7.09 vvel_step 
2380.5 ms 2380.5 ms FluidField.update 
2380.5 ms 2380.5 ms YrunNavierStokes 
2380.5 ms 2380.5ms vMeasure 
2380.5 ms 2380.5ms vBenchmarkSuite.RunSingleBenchmark 
2380.5ms 2380.5 ms yO RunNextBenchmark 

1.0 ms 1.0ms 0 p diffuse 





2245.9ms 2249.8ms 
1915.l1ms 5.70%| 1915.1 ms 
1068.3ms 3.18%| 1068.3 ms 

897.6ms 2.67% 897.6ms 


6.70% | by montReduce 
{garbage collector) 

6 | pbnpSquareTo 

7% | CeneratePayloadTree 














2. Timeline 视 图 


Chrome DevTools 的 Timeline ( 时 间 线 ) 工具 是 查看 代码 整体 性 能 时 第 一 个 要 去 的 地 方 。 它 能 
够 记录 和 分 析 应 用 程序 在 运行 时 的 所 有 活动 。 


Timeline 能 够 让 你 全 面 了 解 在 载 和 和 使 用 网 站 的 过 程 中 ， 时 间 都 耗费 在 了 哪些 地 方 。 每 一 个 
发 生 的 事件 都 被 记录 在 内 ， 并 以 瀑布 图 的 形式 展现 出 来 : 











Qa 口 Bements Network Sources MTimelinel Profiles Resources Audits Console 
®@ OO TF Vew Ml SS Captwre OCauses OS Stacks Memory Paint 


3500ms 2000ms 2500ms 3000ms| |3500ms so00ms ascoms ooms Sso0ms 5000m 6500ms To00m 7500ms B000m: ~ #500ms 
I | 和 用 1 
RECORDS ms 005m Feo rm wm s000m, TT Eo00 mn 7000mv R000 m4 
» 9 Timer Fired (5) » 
» 9 Event (mouseoven) » 


Function Call (InjectedScript: 1) 
» a Event (mouseout) 
> © Event (mouseover) 
m Update Layer Tree ' 
> mpaint x 2 和 
w Composite Layers 
Image Decode (ZVSPy3ME_bigger jpg) 0 
只 Rasterize Paint x 16 > 
Summary 
Range 一 18.16s 


Aggregated Time 18.16 5 


0 M94.479 ns Loading 
- 1.88 s Scripting 
199.743 ms Rendering 
国 115.655 ms Painting 
379.488 ms Other 








7_49 s Tdie 








上 面 的 截图 展示 了 在 浏览 器 中 泻 染 https:Wtwittercom/ 时 的 时 间 线 视图 。 利 用 该 视图 ， 你 就 可 
以 全 面 掌握 哪些 操作 耗费 了 多 少 执行 时 间 : 
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500 ms 1000 ms 1500 ms 2000 ms 2500 ms 3000 ms | |3500ms 4000 ms 4500ms | 
1 
| 1 NW Tu IT 重 NN 
” i a hs 0000 0 | 00 300075| | 
口 Rasterize Paint 0 
m Recalculate Style 0 
@ Update Layer Tree 0 
@ Composite Layers 0 
p a Timer Fired (5) |» 
Receive Response (twitter.com/) 目 
是 Receive Data (twitter.com/) U 
P a Event (unload) > 
9 Function Call (extensions::unload eve... 
目 Function Call (extensions::unload eve... | 
Function Call (extensions::unload eve... ] 
GC Event (1009 KB collected) ] 
Function Call (extensions::unload eve... 
Function Call (extensions::unload eve.,, ] 








在 这 个 截图 中 , 我 们 可 以 看 到 各 种 JavaScript 函 数 、 网 络 调用 、 资 源 下 载 以 及 其 他 Twitter 主页 
演 染 操作 的 渐进 式 执行 (progressive execution )。 通 过 该 视图 ， 我 们 能 够 充分 了 解 哪些 操作 耗 时 
更 长 。 只 要 找 出 了 这 些 操作 ， 就 可 以 对 其 进行 性 能 优化 。Memory 视 图 是 一 个 挺 不 错 的 工具 ， 可 
以 用 来 理解 浏览 器 中 的 应 用 在 其 执行 周期 内 的 内 存 占 用 情况 。 在 Memory 视 图 中 显示 了 应 用 程序 
在 一 段 时 间 内 的 内 存 占 用 图 ， 同 时 还 维护 了 一 个 能 够 统计 内 存 中 所 含 文档 、DOM 节 点 及 事件 侦 
听 需 数量 的 计数 器 。 除 此 之 外 , 该 视图 还 有 助 于 检测 内 存 泄 漏 并 给 出 清晰 的 提示 , 告诉 你 需要 进 
行 哪些 优化 : 
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中 


上 


JavaScript 性 能 是 一 个 令 人 着 迷 的 话题 ， 值 得 专门 来 讲述 。 强 烈 建议 你 好 好 研究 Chrome 的 
DevTools， 弄 清楚 如 何 充 分 利用 该 工具 检测 和 诊断 代码 中 的 性 能 问题 。 


























9.8 小 结 


在 本 章 中 ， 我 们 看 到 了 JavaScript 的 男 一 个 化 身 一 一 以 Node.js 形 式 存在 的 服务 器 端 框架 。 


Node 提 供 了 一 个 异步 事件 模型 , 用 于 在 JavaScript 中 编写 可 伸缩 和 高 性 能 的 服务 器 应 用 程序 。 
我 们 深入 学 习 了 Node 的 一 些 核心 概念 , 例如 事件 循环 、 回 调 函 数 、 模 块 和 计时 器 。 理 解 这 些 概念 
对 于 编写 良好 的 Node 代 码 至 关 重 要 。 我 们 还 讨论 了 一 些 用 于 更 好 地 建构 Node 代 码 及 回调 函数 的 
技术 。 
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至 此 , 这 门 杰出 的 编程 语言 的 探索 之 旅 也 该 作 结 了 。JavaScript 的 无 所 不 能 使 其 已 经 成 为 万 维 


[a] 


网 演变 的 推动 力量 。 它 仍 在 继续 扩展 着 自己 的 疆土 ,在 每 次 新 的 迭代 中 不 断 改 进 。 





























一 开始 我 们 了 解 了 JavaScript 语 法 的 基本 组 成 部 分 ， 掌 握 了 闭 包 的 基本 概念 以 及 函数 的 用 法 。 
大 部 分 JavaScript 模 式 都 基于 这 些 基本 概念 。 我 们 研究 了 如 何 利 用 这 些 模式 编写 出 更 好 的 
JavaScript 代 码 ， 另 外 还 学 习 了 JavaScript 如 何 处 理 DOM 以 及 如 何 使 用 jQuery 有 效 地 操作 DOM。 最 
后 ， 我 们 见识 了 JavaScript 在 服务 需 端 的 化 身 : Node.js。 


本 书 能 够 为 你 在 使 用 JavaScript 编 程 时 开启 男 一 种 思考 方式 。 你 不 仅 能 够 考虑 到 常见 的 模式 ， 
还 能 理解 并 使 用 ES6 所 带 来 的 新 语言 特性 。 
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JavaScript 是 一 门 高 级 、 动 态 、 无 类 型 、 轻 量 的 解释 型 编程 语言 ， 是 创造 万 维 网 内 容 必 不 可 少 
的 技术 之 一 。 大 部 分 网 站 都 使 用 了 JavaScript， 而 且 所 有 的 现代 浏览 器 不 需要 插件 就 可 以 很 好 地 支 
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